javascript - Use data-popup attributes to show Jquery-ui dialogs -
the js snippet below should show requests popups has same id trigger.
for example <a class="popup-button" data-popup="#popup-a">popup a</a>
should show popup has id #popup-a
when click on.
but when clicked on of triggers, shows popups on page instead popup requested "has same id trigger has attribute", here 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>');
you don't have use .each since have class (.popup) dialog containers.
just hide them on load using autoopen
.
and open them dialog('open')
. overlay effect make give modal: true
.
for transition effect use show , hide effect options along 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 demo http://jsfiddle.net/dhirajbodicherla/odlrrn17/2/
also, in demo had reversed data-popup references.
Comments
Post a Comment