1

我将这个简单的 jquery 插件用于模态弹出窗口，但它没有用于多个弹出窗口的功能，所以我正在尝试自己制作。

首先，我为打开模态和模态 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()功能有效但模态没有显示在正确位置的功能之后，第二次。

请分享任何建议。希望有人以前使用过这个插件。

4

2 回答 2

1

您可以使用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();
    });
});
于 2013-07-14T05:00:29.540 回答
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()
    });
});

工作演示

于 2013-07-14T02:51:03.553 回答