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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -