JQuery несколько модальных плагинов

Question

Я использую this simple jquery plugin для модальных всплывающих окон, но у него нет функции для нескольких всплывающих окон, поэтому я пытаюсь сделать свой собственный.

Сначала я добавил уникальные индексы к кнопкам, открывающим модальные и модальные div. HTML создается динамически.

<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> 

И затем я изменил js, чтобы открыть модалы соответствующим индексом.

$(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    
    }); 
}); 

Это работает, но модальности открываются только один раз. Как исправить я попытался добавления

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

после функции popup(), которая работает, но модальный не отображается в правильном положении, во второй раз.

Просьба поделиться любыми предложениями. Надеюсь, кто-то использовал этот плагин раньше.

Answer 1

Возможно, вы захотите посмотреть на другие библиотеки, такие как jQuery UI или Twitter Bootstrap, так как они уже решили эту проблему. Если вы хотите катиться самостоятельно, я бы немного изменил ваш подход.

Добавить атрибут на кнопки, в которых хранится идентификатор модального диалога, который вы хотите отобразить. В приведенном ниже примере я назвал его «data-modal-id». При нажатии на кнопку, получить значение этого атрибута и посмотреть модальный с этим ID и показать:

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

Answer 2

Вы можете использовать fadeIn() и fadeOut().

Пример

Создать что-то вроде

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

где в CSS

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

.my_modal_open div{ z-index:1; } 

И ваш Jquery должно быть, как это

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