使用数据弹出属性显示 Jquery-ui 对话框

Use data-popup attributes to show Jquery-ui dialogs

本文关键字：显示 Jquery-ui 对话框 属性 数据      更新时间：2023-09-26

下面的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>');

您不必使用 .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/

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

相关文章：