Confirm you want to leave page when specific div is shown

I have a one page application that steps through some information.
What I would like is that once they step to a certain location and a specific div becomes visible to stop that user from leaving the page without confirming on a dialogue that they want to leave.

Then, when they go past that step, and that div is no longer visible. The restriction is no longer there and they are 'free' to leave the page without a warning.
Al4ddin2Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mandeep SinghDatabase AdministratorCommented:
Pravin AsarPrincipal Systems EngineerCommented:
Here is simple I setup for you. Hope this helps

<html>
      <body>
            
      <div id="MyDiv">this is div</div>
      <script type="text/javascript">
      var divExists = false;
    function checkExists() { if (document.getElementById('MyDiv')) { divExists = true;} };

window.onload = function() {
    window.addEventListener("beforeunload", function (e) {
        var confirmationMessage = 'It looks like you have been editing something. ';
        confirmationMessage += 'If you leave before saving, your changes will be lost.';

            checkExists();
        if (!divExists) {
            return undefined;
        }
        // divExists
        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
        return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
    });
};
      </script>
      </body>
</html>
Pravin AsarPrincipal Systems EngineerCommented:
Use this one. This is better

<html>
      <body>
      <p>This page checks existence of div (id=MyDiv) and it's visibility.</p>            
      <p>If exists and visible, before leaving the page, you will see confirmation pop-up.</p>            
      <div id="MyDiv" style="display:block;">this is div</div>
      <script type="text/javascript">
            window.onload = function() {
                window.addEventListener("beforeunload", function (e) {
                    var confirmationMessage = 'It looks like you have been editing something. ';
                    confirmationMessage += 'If you leave before saving, your changes will be lost.';
                        
                        var divExists = false;
                        var divVisible = false;
                        var divObj = document.getElementById('MyDiv');
                      if (divObj) {
                            divExists = true;
                            if (divObj.style.display != "none") {
                                    divVisible = true;
                            }
                      }
            
                    if (!divExists || !divVisible) {
                        return undefined;
                    }
                    // divExists
                    if (divExists && divVisible) {
                          (e || window.event).returnValue = confirmationMessage; //Gecko + IE
                          return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.      
                    }
                });
            };
      </script>
      <a href="http://www.experts-exchange.com">External Link</a>
      </body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Pravin AsarPrincipal Systems EngineerCommented:
Mandeep

The link you posted, does not seems to be active website.
Mandeep SinghDatabase AdministratorCommented:
@Pravin Asar, please check it is working fine i have checked it. for more please check direct link  http://hightechnology.in/show-alert-message-leaving-page/.

http://Hightecnology.in
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.