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，因为他们已经解决了这个问题。如果你想自己动手，我会略微改变你的方法。

向按钮添加属性，该按钮存储您要显示的模式对话框的ID。在下面的例子中，我称之为“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();
    });
});

Jquery多个模态插件

2 个答案: