snaggs snaggs - 3 months ago 7
HTML Question

How to go back to main view after opening dialog?

I have 2 html pages application and on second page I open dialog by using

css
only.

1st page has one button:

<button onClick="redirectToDetails()">Go to details</button>


and JS:

function redirectToDetails(){
window.location = "second-page.html";
}





on second page I have button
Back
and button 'open dialog'

JS:

function goBack(){
window.history.back();
}

function openDialog(){
window.location = "#modal-one"
}


THE DEMO

My dialog content is:

<div class="gl-modal" id="modal-one" aria-hidden="true">
<div class="gl-modal-dialog">
<div class="gl-modal-header">
<h2>Modal in CSS?</h2>
<a href="#close" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<p>One modal example here! :D</p>
</div>
<div class="gl-modal-footer">
<a href="#close" class="btn">Nice!</a> <!--CHANGED TO "#close"-->
</div>
</div>
</div>





The problem:

When I go from 1st view to second view and open Dialog, back button doesn't work. It opens me dialog again because I use
window.history.back();


I tried a lot of ways to clear history, to redirect back to main page - nothing works

How can i open dialog and do not record to history , so
window.history.back();
will turn me to main view?

Can someone help me with that problem?

Answer

In my humble opinion, you should just stick to two technologies, not mix up hyperlinks and hashes and manual history manipulation. Use simple hyperlinks for navigation between views and use hash links for the modals. That way the standard browser back button even works as well.

This version works for me:

index.html

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Main view</h1>
    <a href="second-page.html">Second view</a>
</body>
</html>

second-page.html

<!doctype html>
<html  >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Second view</h1>                       
  <a href="index.html">Back</a>
  <button  onClick="openDialog()" >open Dialog</button>  
  <div class="gl-modal" id="modal-one" aria-hidden="true">
    <div class="gl-modal-dialog">
        <div class="gl-modal-header">
            <h2>Modal in CSS?</h2>
            <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
        </div>
        <div class="modal-body">
            <p>One modal example here! :D</p>
        </div>
        <div class="gl-modal-footer">
            <a href="#close" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
        </div>
    </div>
</div>       

    <script>
      function openDialog(){
        window.location.hash = "#modal-one"
      }
    </script>
</body>
</html>