Jquery多模态插件
Jquery多模态插件
提问于 2013-07-14 10:15:00
我正在使用this simple jquery plugin处理模式弹出窗口，但它没有支持多个弹出窗口的功能，所以我正在尝试自己做一个。
首先，我为打开modal和modal的按钮添加了唯一的索引。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，通过适当的索引打开了modals。
$(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()函数之后，该函数可以工作，但模式没有显示在正确的位置，第二次。
请分享任何建议。希望之前有人用过这个插件。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-07-14 10:51:04
你可能想看看其他的库，比如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()
});
});Stack Overflow用户
发布于 2013-07-14 13:00:30
您可以使用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();
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17635944
复制相关文章
相似问题
腾讯云开发者
