javascript - Show UI dialogs using data-popup attributes -
i using jquery ui dialog show more 1 popup on 1 page, each popup have own id , triggered anchor data-popup=""
attribute.
for example,
<a class="popup-button" data-popup="#popup-a">popup a</a>
will trigger popup has id #popup-a
below js snippet put in attempted achieve this, however, reason lunches popups in page instead of 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 js fiddle here: http://jsfiddle.net/znq4jwdu/1/
it launches dialog cause call
$('.dialog').addclass("dialog-opened");
which mean you'll open elements have dialog class.
you can fix doing this:
$(popupid).parent().addclass("dialog-opened");
and same remove dialog
$(popupid).parent().removeclass("dialog-opened");
look @ jsfiddle
note that, don't know if it's right behavior when click on "popup a", trigger popup content "bbb....."
hope helps
Comments
Post a Comment