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

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

PHP DOM loadHTML() method unusual warning -

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