freakedout Posted February 20, 2008 Share Posted February 20, 2008 Hi All, I have a requirement of creating a survey for my website. This survey questions must open in a pop-up window whenever the end user tries to close the browser or clicks the back button or changes the address in the url. For this, I am using onbeforeUnload() function. Instead of creating a pop-up window for the survey, i have used div tags to show the survey questions. Please find the code below: Survey.html <html> <head> <title>My Online Survey</title> <link href="/styles/styles.css" rel="stylesheet" type="text/css" /> </head> <body> <script language="JavaScript"> function showSurvey() { document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'; window.onunload = unloadPage(); return false ; } window.onbeforeunload = showSurvey; function unloadPage() { //alert("unload event detected!"); event.stopPropagation(); } </script> <p><H1>Parent page!</h1></p> <div id="light" class="white_content"> <table> <tr><td><h1>Attorneys.com Visitors Survey </h1></td> </tr> <tr> <td> We noticed that you began filling in the form but did not complete it. To help us improve this website, we’d like to understand why. Please answer the following questions. </td> </tr> <br> <br> <tr> <td> I stopped completing the form because (choose all that apply): </td> </tr> <tr> <td> <input type="checkbox" value="on" name="test">na</input> </td> </tr> <tr> <td align="right"> <button name="Submit" title="Submit" value="1" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; javascript:submitSurvey();">Submit</button> </td> </tr> </table> </div> <div id="fade" class="black_overlay"></div> </body> </html> styles.css .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: #BDBCB9; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 10px solid red; background-color: white; z-index:1002; overflow: auto; } My problem is whenever i try to change the url or click the back button, the survey div shows up and immediately goes away and the changed url page or the previous page shows up respectively.I want these pages to be shown up only when i cliick the "submit" button inside the <div>. I am not able to solve this issue. Please help. Thanks in Advance. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 20, 2008 Share Posted February 20, 2008 What you are trying to do is probably one of the most annoying things on the internet and your visitors will hate you for it. Quote Link to comment Share on other sites More sharing options...
freakedout Posted February 20, 2008 Author Share Posted February 20, 2008 But sometimes circumstances are like that U have to do certain things which you don't want to do. Anyways, if you have any suggestions, it would be of great help. Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted February 20, 2008 Share Posted February 20, 2008 Try this and see if it is what your looking for: http://www.phpfreaks.com/forums/index.php/topic,179668.msg800776.html#msg800776 You probably will have to implement it a little bit different; but you should be able to configure it to your needs. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.