Jquery multiple modals plugin

问题:

I'm using this simple jquery plugin for modal popups but it doesn't have a function for multiple popups so I'm trying to make my own.

First I added unique indexes to the buttons that open the modal and the modal divs. The HTML is created dynamically.

<button class="my_modal_open" id="1">Open modal</button>
<div id="my_modal" class="1" style="display:none;margin:1em;">
    <a href="#" class="my_modal_close" style="float:right;padding:0 0.4em;">×</a>
    Modal Content
</div>

<button class="my_modal_open" id="2">Open modal</button>
<div id="my_modal" class="2" style="display:none;margin:1em;">
    <a href="#" class="my_modal_close" style="float:right;padding:0 0.4em;">×</a>
    Modal Content
</div>

<button class="my_modal_open" id="3">Open modal</button>
<div id="my_modal" class="3" style="display:none;margin:1em;">
    <a href="#" class="my_modal_close" style="float:right;padding:0 0.4em;">×</a>
    Modal Content
</div>

And then I modified the js to open modals by appropriate index.

$(document).ready(function() {
  $('.my_modal_open').click( function() {
        $('#my_modal').css('display','none'); //added
        var open_id = $(this).attr('id'); //added
        $('#my_modal.' + open_id).popup(); //changed to get div id and class               
  });
});

This works but the modals open only once. As a fix I tried adding

$('#my_modal').css('display','block');

after the popup() function which works but the modal doesn't display in the right position, the second time.

Please share any suggestions. Hopefully someone used this plugin before.

回答1:

You might want to look at other libraries like jQuery UI or Twitter Bootstrap, since they have already solved this problem. If you want to roll your own, I would change your approach slightly.

Add an attribute to the buttons which stores the ID of the modal dialog you want to show. In the example below I called it "data-modal-id". When you click the button, get the value of that attribute and look up the modal with that ID and show it:

HTML

<button class="my_modal_open" data-modal-id="1">Open modal</button>
<div id="1" style="display:none;margin:1em;">
    <a href="#" class="my_modal_close" style="float:right;padding:0 0.4em;">×</a>
    Modal Content
</div>

<button class="my_modal_open" data-modal-id="2">Open modal</button>
<div id="2"style="display:none;margin:1em;">
    <a href="#" class="my_modal_close" style="float:right;padding:0 0.4em;">×</a>
    Modal Content
</div>

<button class="my_modal_open" data-modal-id="3">Open modal</button>
<div id="3" style="display:none;margin:1em;">
    <a href="#" class="my_modal_close" style="float:right;padding:0 0.4em;">×</a>
    Modal Content
</div>

jQuery

$(document).ready(function () {
    $('.my_modal_open').click(function () {
        $('#' + $(this).data("modal-id")).popup()
    });
});

Working Demo

回答2:

You can use fadeIn() and fadeOut().

Example

Create something like

<div class="my_modal_background"></div>

where in css

.my_modal_background{ background:#000; position:fixed; width:100%; height:100%; z-indez:0 }

.my_modal_open div{ z-index:1; }

And your Jquery must be like this

$(document).ready(function () {
    $('.my_modal_open').click(function () {
        $(this).children('div').fadeIn();
        $('.my_modal_background').fadeIn();
    });
});