title: Open a modal popup div with new URL (like instagram)
body: <p>I want to replicate the Instagram behavior for modal popups. If you go to an IG page (say <a href="https://www.instagram.com/thehughjackman/" rel="nofollow noreferrer">https://www.instagram.com/thehughjackman/</a>), and click on one of his pics, a modal popup comes up with the picture enlarged, and the URL immediately changes to the specific page URL (like <a href="https://www.instagram.com/p/Bwedsp-HEF3/" rel="nofollow noreferrer">https://www.instagram.com/p/Bwedsp-HEF3/</a>). When you click on the back button, the modal box closes, and the URL resets to the main page URL. How can I replicate this behavior?</p>
  
  <p>I have used the HTML5 history API to set the URL through javascript, but still cannot replicate the back button behavior. Here's some sample code I have (the CSS isn't perfect but more or less this is the idea) -</p>
  
  <p><b>JAVASCRIPT:</b></p>
  
  <pre><code>function ChangeUrl(title, url) {
      if (typeof (history.pushState) != "undefined") {
          var obj = { Title: title, Url: url };
          history.pushState(obj, obj.Title, obj.Url);
      } else {
          alert("Browser does not support HTML5.");
      }
  }
  
  $(document).ready(function() {
      $("#test").click(function() {
          ChangeUrl('', '?q=abcd');
          $("#modal").html(`&lt;img id="big" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg"&gt;`).show();
      });
  });
  </code></pre>
  
  <p><b>CSS:</b></p>
  
  <pre><code>#modal {
      display: none;
      width: 500px;
      margin: 20px auto;
      border: 2px solid #777;
  }
  
  #thumb {
      max-width: 200px;
      max-height: 200px;
      border: 1px solid #555;
  }
  
  #big {
      width: 100%;
  }
  </code></pre>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;a href="#" id="test"&gt;&lt;img id="thumb" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg"&gt;&lt;/a&gt;
  
  &lt;div id="modal"&gt;&lt;/div&gt;
  </code></pre>