All geek questions in one place

How to simply open a fancybox window (not onclick)

I run fancybox to open onclick as follows:

 $('.telefonosOtrosPaises').fancybox({ 'type' : 'iframe', 'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp', 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', /*'easingIn' : 'easeInOutBack', 'easingOut' : 'easeInOutBack', */ /*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/ onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})} });

but how can I just open it in my js code when I need it?

+4
source share
5 answers

Instead of calling .fancybox on an element, call it like this:

 $.fancybox.open(...)

Note this is fancybox 2 syntax, although it can work with v1

If you want it to be open both on onclick and when prompted in your code, just call click on the element to which you attached it.

 $('.telefonosOtrosPaises').click();
+7
source

you can just call yourControl.click() to simulate a click event.

This way you can call it whenever you want :)

+1
source

According to the Fancybox blog , you can try something like this:

 $.fancybox( $('.telefonosOtrosPaises'), { 'type' : 'iframe', 'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp', 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', /*'easingIn' : 'easeInOutBack', 'easingOut' : 'easeInOutBack', */ /*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/ onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})} } );
+1
source

This can be done very easily:

  <div id="divFancy" style="display: none;"> FANCY BOX CONTENT GOES HERE </div> <script type="text/javascript"> $(document).ready(function () { $.fancybox({ 'href': '#divFancy' }); }); </script>
+1
source 
 <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function() { $('#target').click(function() { $('.telefonosOtrosPaises').fancybox({ 'type' : 'iframe', 'href' : 'http://es.solmelia.com/nMenus/jsp/telefonosOtrosPaises.jsp', 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', /*'easingIn' : 'easeInOutBack', 'easingOut' : 'easeInOutBack', */ /*onComplete : function(){ $('#fancybox-content').css({'height':'380px','width':'570px','background':'white','padding':'20px'})}*/ onComplete : function(){ $('#fancybox-content').css({'width':'630px','background':'white','paddingTop':'15px'})} }); }); }); </script> <input type="button" id="target" value="press me"/> </body> </html>
-1
source

Source: https://habr.com/ru/post/1387374/

More articles:


All Articles