使用 data-popup 属性显示 Jquery-ui 对话框

Question

下面的 JS sn-p 应该只显示与其触发器具有相同 ID 的请求弹出窗口。

例如，<a class="popup-button" data-popup="#popup-a">POPUP A</a> 应在单击时显示 ID 为 #popup-a 的弹出窗口。

但是当点击任何触发器时，它会显示页面上的所有弹出窗口，而不是来自请求的弹出窗口“具有与触发器具有其属性相同的 ID”，这是一个 JS 小提琴：http://jsfiddle.net/znq4jwdu/1/

//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>');

Answer 1

您不必使用 .each，因为您已经有一个用于对话框容器的类 (.popup)。

只需使用 autoOpen 在加载时隐藏它们。

并通过dialog('open') 打开它们。对于叠加效果，请给它一个modal: true。

对于过渡效果，使用显示和隐藏效果选项以及持续时间。

$('.popup').dialog({
    modal: true,
    autoOpen: false,
    show: {
        effect: 'fade',
        duration: 500
    },
    hide: {
        effect: 'fade',
        duration: 500
    },
    open: function () {

    },
    close: function () {

    }
});
$('.popup-button').on('click', function () {
    var popupId = $(this).attr("data-popup");
    $(popupId).dialog('open');
});

这是一个演示http://jsfiddle.net/dhirajbodicherla/odLrrn17/2/

此外，在您的演示中，您已经反转了数据弹出引用。