使用數據彈出屬性顯示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 .....」的彈出窗口。

希望它有幫助