www.webdeveloper.com
Results 1 to 2 of 2

Thread: popup window to close and open a different page of another existing window

  1. #1
    Join Date
    Apr 2014
    Posts
    1

    popup window to close and open a different page of another existing window

    I have a quiz that I'd like to do this:
    After answering the question, a popup with feedback opens on top. After reading the feedback, a user click continue on the popup, the popup closes and go to the next question in the main quiz window.

    Is it possible to achieve that with Javascript?

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    899
    What you want is entirely possible, but I do have to ask, why use popups? They get blocked in many modern browsers by default, all plugins/extensions aside. I feel using something like modal windows in jQuery (or anything similar) would be a better choice as it'll allow you to get the 'popup' feel without it being a separate window (that may get blocked) and you could more easily detect the closing of said window.

    If you want to use actual popup windows, you have to be careful. You could try to use the unload event of that window to trigger a function in the parent window (which can load the next question), however this isn't 100% reliable in all browsers. The better alternative is to have the parent check to see if the popup is still open.
    Code:
    var $popup = window.open("popup.html", "yourPopup", "");
    var $checkForPopup = window.setInterval(function() {
    	if($popup.closed !== false) {
    		window.clearInterval($checkForPopup);
    		window.location.href = "question2.html";
    	}
    }, 100);
    That's an example of how it might work for you. The popup gets created and stored in a variable. An interval timer runs (10 times a second) and checks to see if the popup is closed or not. Once it is closed the timer is cleared and the next question page is loaded.

    But remember, using jQuery modal windows (or anything similar) would be better. jQuery's .dialog() method actually has a close event you can set, so when this 'window' is closed it will automatically trigger the code you need (such as loading a new question).
    HTML Code:
    <div id="dialog">Here's some feedback on the last question</div>
    <script>
    $("#dialog").dialog({
    	resizable: false,
    	width: 640,
    	height: 480,
    	modal: true,
    	close: function() {
    		document.location.href = "question2.html";
    	}
    });
    </script>
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles