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

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -