SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Displaying a modal dialog box when user leaves current site

    Is it possible to display some sort of a modal dialog box in the event where the user leaves the
    current domain? I mean when a user is about to leave a page, is it
    possible to display some dialog box in which some kind of confirmation is
    shown in addition to some other custom HTML messages?

  2. #2
    Non-Member
    Join Date
    Aug 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you can use onunload event

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    There is no way to tell whether a user is reloading the current page, going to a different site, or closing their browser. All three trigger the same unload event. Once that event triggers it is too late to do anything with the current page as it has already started unloading. Some browsers have a non-standard beforeunload event that triggers before the page starts to unload and gives the opportunity to abort the unload request.

    The only cross browser way to do modal dialogs is to build them yourself within the web page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Smart programmer silver trophy M.Zeb Khan's Avatar
    Join Date
    Jan 2004
    Location
    Luton, Beds
    Posts
    1,791
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, agreed with felgall. What about opening a popup once a user close the window?

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can these popups that you suggest contain custom HTML messages/tags in it?

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    See http://javascript.about.com/library/blmodald1.htm for a simple example. The entire dialog box is built with HTML so can contain anything a web page can.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    ok here is what i have gathered so far.

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="modaldbox.js">
    </script>
    <script type="text/javascript">
    	function addEventSimple(obj,evt,fn) {
    		if (obj.addEventListener)
    			obj.addEventListener(evt, function(e) {
    				if(!e) e = window.event;
    				fn(e, obj);
    			},false);
    		else if (obj.attachEvent)
    			obj.attachEvent('on'+evt, function(e) {
    				if(!e) e = window.event;
    				fn(e, obj);
    			});
    	}
    	addEventSimple(window, 'unload', function(e, obj) {
     
    		sm('box',200,50);
    		alert("in");
    	});
    </script>
    <link rel="stylesheet" href="modaldbox.css" type="text/css" />
    </head>
     
    <body>
    <div id="box" class="dialog">
    <div style="text-align:center"><span id="txt">Press OK to continue.</span><br>
    <button onclick="hm('box');okSelected()">OK</button></div>
    </div>
    orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<span class="dialink" onclick="sm('box',200,50)">modal dialog alert substitute</span>
    </body>
    </html>

    In the above example, if i remove the alert from the function, it returns nothing. Is there anything that can be done to show the modal dialog without having to use the alert message?

  8. #8
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The above example did not geneate a modal dialog when i removed the alert box. Is it possible to let this dialog to show by pausing the browser for certain milliseconds?

    I need to show this modal dialog box when the user leaves the current page which s/he is browsing.

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can't show anything in the page after the page is unloaded because the page is no longer there to display it in.

    From within the page itself you can't tell if the page is unloading because the browser is closing, to load a different page, or just to reload the same page - it will be rather annoying if a modal dialog pops up every time someone needs to refresh the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Zealot
    Join Date
    Mar 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you felgall for your response. Is there any alternate solution that i might use for the window unload event? The only solution i see so far is to display the general javascript alert message only :-(

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    That is about all there is time for once the page starts unloading for any reason.

    Some browsers support a non-standard event called beforeunload but even there you can't distinguish between refreshing the page and closing the browser to determine whether or not to display anything. Also that event is not understood by all browsers and is often disabled in browsers that do support it because popups of any sort when you are trying to leave a web page are extremely annoying.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    SitePoint Zealot shoorace's Avatar
    Join Date
    Jun 2005
    Location
    Florida
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pragyaratna, your requirement is damn outrageous.

    really tough to get it done.
    hope, u get some solutions on this.

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Due to security concerns, there is no solution to this.

    There is only one event that can be usefully used, and that's the onbeforeunload event.
    This triggers whenever the page is changed for a new location.

    It is not possible to determine the destination of the new page.
    It is not possible to determine if the user is leaving your domain.
    It is not possible to have that much control over the user's experience.

    In summary, it comes down to control. We need to accept that control is in the hands of the user. Bad things occur whenever we try to remove that control from the user.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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