jQuery多种模式插件 [英] Jquery multiple modals plugin

问题描述

我正在使用这个简单的jquery插件用于模式弹出窗口，但是它没有多个弹出窗口的功能，因此我尝试制作自己的窗口.

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.

首先，我向打开模式和模式div的按钮添加了唯一索引. HTML是动态创建的.

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>

然后我将js修改为通过适当的索引打开模式.

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.

推荐答案

您可能想要查看其他库，例如jQuery UI或Twitter Bootstrap，因为它们已经解决了此问题.如果您想自己动手，我会稍作更改.

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.

向按钮添加一个属性，该属性存储要显示的模态对话框的ID.在下面的示例中，我将其称为"data-modal-id".当您单击按钮时，获取该属性的值并查找具有该ID的模态并显示它:

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

这篇关于jQuery多种模式插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！