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

Question

下面的 JS 片段应仅显示与其触发器具有相同 ID 的请求弹出窗口。

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

但是当单击任何触发器时，它会显示页面上的所有弹出窗口，而不是请求的弹出窗口“具有与触发器具有相同属性的 ID”，这是一个 JS fiddle : 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/

此外，在您的演示中，您颠倒了数据弹出引用。