使用数据弹出属性显示 UI 对话框答案

【问题标题】：Show UI dialogs using data-popup attributes使用数据弹出属性显示 UI 对话框
【发布时间】：2015-06-18 16:43:50
【问题描述】：

我正在使用jquery ui dialog 在一个页面上显示多个弹出窗口，每个弹出窗口都有自己的 ID，它将由具有 data-popup="" 属性的锚点触发。

例如，

<a class="popup-button" data-popup="#popup-a">POPUP A</a>

将触发 ID 为 #popup-a 的弹出窗口

下面是我试图实现这一点的 JS sn-p，但是，由于某种原因，它会午餐页面中的所有弹出窗口而不是请求的弹出窗口。

//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/

【问题讨论】：

标签： javascript jquery jquery-ui dialog jquery-ui-dialog

【解决方案1】：

它会启动您调用的所有对话框

$('.dialog').addClass("dialog-opened");

这意味着您将打开所有具有 dialog 类的元素。

您可以通过以下方式解决此问题：

$(popupId).parent().addClass("dialog-opened");

同样删除对话框

$(popupId).parent().removeClass("dialog-opened");

看看这个JSFiddle

请注意，我不知道这是否是正确的行为，但是当您单击“POPUP A”时，它会触发内容为“BBB.....”的弹出窗口

希望对你有帮助

【讨论】：