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

Question

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

例如，

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

将触发具有ID #popup-a

下面弹出的是JS代码段我放在一起在试图做到这一点，但是，由于某种原因，午餐都弹出页面中的弹出窗口而不是所请求的弹出窗口。

//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提琴在这里：http://jsfiddle.net/znq4jwdu/1/

Answer 1

它启动的所有对话，因为你叫

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

这意味着您将打开所有谁元素对话框类。

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

和相同删除对话框

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

看这个JSFiddle

需要注意的是，我不知道：

你可以这样做解决这个问题这是正确的行为，但是当你点击“POPUP A”时，它会触发内容为“BBB .....”的弹出窗口。

希望它有帮助