Open fancybox while another fancybox instance is open

When the user clicks the button, I show a fancybox that indicates that the user should wait for the action to complete:

jQuery(document).ready(function () { $.fancybox('Please Wait...',{'modal':true}); }); 

now I check the requested action using the $ .post function and return a result message (either the action was successful, or an error, why the action failed), and now I want to close the first fancybox and show the new fancybox with the response I received from ajax:

 $.post('someurl.aspx',{'somethingtopost':'value'}, function(data){ jQuery(document).ready(function () { $.fancybox(data); }); } ); 

The problem is that the second fancybox is not showing. There are many examples showing the second fancybox when closing the first (adding to the onClosed attribute), but since in this I do not want to show the second fanybox after closing the first, I want to show it when the action is completed.

+4
source share
1 answer

You can start the second Fancybox at any time, regardless of the fact that it is already open (and does not close it first). Just try launching the second Fancybox when the action is complete.

The second Fancybox window (once launched) will replace the first without an additional close command.

 function openFancybox() { setTimeout( function() {$('#delayed').trigger('click'); },10000); } $(document).ready(function() { $('#pageLoad').fancybox({ helpers: {overlay:{opacity: 0.3}} }).click(); openFancybox(); $('#delayed').fancybox({ helpers: {overlay:{opacity: 0.3}} }); }); // ready 

I installed here that launches Fancybox when the page loads, then it launches the second Fancybox after 10 seconds.

The first Fancybox automatically closes after the second launch.

UPDATE

Or maybe you prefer this version

 function openFancybox() { setTimeout( function() {$('#delayed').trigger('click'); },10000); } $(document).ready(function() { $('#goProcess').click(function(){ $.fancybox({ href: '#wait', modal: true, helpers: {overlay:{opacity: 0.3}}, afterLoad: function() { openFancybox(); } }); // fancybox }); $('#delayed').fancybox({ helpers: {overlay:{opacity: 0.3}} }); }); // ready 

Open fancybox by pressing a button, then launches a second fancybox after 10 seconds (or after the process completes in the background.)

+7
source

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


All Articles