Use data-popup attributes to show Jquery-ui dialogs

Question

The JS snippet below should show only the requests popups which has the same ID as its trigger.

For example <a class="popup-button" data-popup="#popup-a">POPUP A</a> should show popup that has the ID #popup-a when click on.

But when clicked on any of the triggers, it shows all popups that are on the page instead from the popup that is requested "has the same ID that the trigger has it its attribute", here is a JS fiddle: 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

You don't have to use .each since you already have a class (.popup) for the dialog containers.

Just hide them on load using autoOpen.

And open them by dialog('open'). For the overlay effect make give it a modal: true.

For transition effect use the show and hide effect options along with duration.

$('.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');
});

Here is a demo http://jsfiddle.net/dhirajbodicherla/odLrrn17/2/

Also, in your demo you had reversed data-popup references.