Show UI dialogs using data-popup attributes

Question

I am using jquery ui dialog to show more than one popup on one page, each popup will have its own ID and it will be triggered by an anchor with a data-popup="" attribute.

For example,

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

Will trigger the popup that has the ID #popup-a

Below is the JS snippet I put together in an attempted to achieve this, however, for some reason it lunches all the popups in the page instead of the requested popup.

//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>');

I have put together a JS fiddle here: http://jsfiddle.net/znq4jwdu/1/

Answer 1

It launches all the dialog cause you call

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

Which mean you'll open ALL the elements who have dialog class.

You can fix this by doing this:

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

and the same to remove the dialog

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

Look at this JSFiddle

Note that, I don't know if it's the right behavior but when you click on "POPUP A", it trigger the popup with content "BBB....."

Hope it helps