Question

下面的JS代码段应该只显示与其触发器具有相同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/

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

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

1 个答案: