title: Modal content "pages" and going back to previous page from button
body: <p>I am doing this small website, not an app, that looks like an app.
  It has modals. In the modal, you click on the links that take you further to the next view.
  Then you can go back to the previous &quot;page&quot; or view from the back button on the modal's header and you can also close the modal.</p>
  <p>How can I do the following:</p>
  <ol>
  <li>Go back button goes to the previous view. If it's the first view, then it closes the modal.</li>
  <li>Exit button closes the modal.</li>
  <li>Modal content changes when clicking on the Next button. Or if there's no Next, then clicking on another button or link.</li>
  </ol>
  <p>Here is the basic HTML code I've created:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal{
    max-width:400px;
    margin:0 auto;
    background:#f5f5f5;
    border-radius:6px;
  }
  .modal-header{
    position:relative;
    padding:20px;
    background:#eee;
    display:flex;
    text-align:center;
    align-items:center;
    justify-content:center;
    border-radius:6px 6px 0 0;
  }
  .modal-header a{
    text-decoration:none;
    display:block;
    width:30px;
    height:30px;
    background:#aaa;
    line-height:30px;
    text-align:center;
    color:#fff;
  }
  .close-modal{
    margin-left:auto;
  }
  .modal-header h3{
    margin:0 0 0 auto;
  }
  .modal-content{
    padding:30px;
  }
  .modal-content h2{
    text-align:center;
  }
  .modal-content .form-block{
    margin:20px 0;
  }
  .modal-content .form-control{
    width:100%;
    border:0;
    background:transparent;
    border-bottom:2px solid #aaa;
    padding:5px 0;
    height:40px;
  }
  .modal-content .btn{
    display:block;
    text-align:center;
    background:blue;
    text-decoration:none;
    padding:10px;
    border-radius:6px;
    color:#fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal"&gt;
    &lt;div class="modal-header"&gt;
      &lt;a href="#" class="goback"&gt;&amp;lt;&lt;/a&gt;
      &lt;h3&gt;Title here&lt;/h3&gt;
      &lt;a href="#" class="close-modal"&gt;&amp;times;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="modal-content"&gt;
      &lt;h2&gt;This is content 1st block&lt;/h2&gt;
      &lt;form&gt;
        &lt;div class="form-block"&gt;
          &lt;input type="text" class="form-control" placeholder="Write here" id="field-1" name="field-1" required&gt;
        &lt;/div&gt;
        &lt;a href="#" class="btn" id="myButton"&gt;Next&lt;/a&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class="modal-content"&gt;
      &lt;h2&gt;This is content 2nd block&lt;/h2&gt;
      &lt;form&gt;
        &lt;div class="form-block"&gt;
          &lt;input type="text" class="form-control" placeholder="Write here" id="field-2" name="field-2" required&gt;
        &lt;/div&gt;
        &lt;div class="form-block"&gt;
          &lt;input type="text" class="form-control" placeholder="Write here" id="field-3" name="field-3" required&gt;
        &lt;/div&gt;
        &lt;a href="#" class="btn" id="myButton"&gt;Next&lt;/a&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>