我正在使用jquery ui dialog要在一页上显示多个弹出窗口,每个弹出窗口都有自己的 ID,并且将由带有 data-popup=""
的 anchor 触发。属性。
例如,
<a class="popup-button" data-popup="#popup-a">POPUP A</a>
将触发 ID 为 #popup-a
的弹出窗口
下面是我为了实现此目的而组合在一起的 JS 片段,但是,由于某种原因,它会弹出页面中的所有弹出窗口,而不是请求的弹出窗口。
//Popups
$('.popup-button').each(function() {
var popupId = $(this).attr("data-popup");
$.data(this, 'dialog', $(popupId).dialog({
modal: false,
open: function(){
$(".dialog").addClass("dialog-opened");
$('.popup-close').fadeIn();
$('#falseModal').fadeIn();
jQuery('#falseModal').bind('click',function(){
jQuery('.popup').dialog('close');
});
},
close: function(){
$(".dialog").removeClass("dialog-opened");
$('#falseModal').fadeOut();
}
}));
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
$('.popup-close').each(function() {
$(this).on("click",function(){$(this).parents('.popup').dialog("close");});
});
$(window).resize(function() {
$(".popup").dialog("option", "position", {my: "center", at: "center", of: window});
$('.widget-overlay').show().fadeOut(800);
});
$("body").append('<div id="falseModal" style="display:none;"></div>');
我在这里整理了一个 JS fiddle :http://jsfiddle.net/znq4jwdu/1/
最佳答案
它会启动您调用的所有对话框
$('.dialog').addClass("dialog-opened");
这意味着您将打开所有具有 dialog 类的元素。
您可以通过执行以下操作来解决此问题:
$(popupId).parent().addClass("dialog-opened");
同样的方法来删除对话框
$(popupId).parent().removeClass("dialog-opened");
看看这个JSFiddle
请注意,我不知道这是否是正确的行为,但是当您单击“POPUP A”时,它会触发内容为“BBB.....”的弹出窗口
希望对你有帮助
关于javascript - 使用数据弹出属性显示 UI 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30921171/