title: How to make a pop up appear when you click a button in html
body: <p>I need help with this and because I've been researching the internet and I found nothing good, so I'm trying to make a pop up when a user clicks a button. This is the code I found but did not work:</p>
  <pre><code>$('#show').on('click', function () {
      $('.center').show();
      $(this).hide();
  })
  
  $('#close').on('click', function () {
      $('.center').hide();
      $('#show').show();
  })
  
  .center {
      margin: auto;
      width: 60%;
      padding: 20px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  .hideform {
      display: none;
  }
  
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;div class=&quot;center hideform&quot;&gt;
      &lt;button id=&quot;close&quot; style=&quot;float: right;&quot;&gt;X&lt;/button&gt;
      &lt;form action=&quot;/action_page.php&quot;&gt;
          First name:&lt;br&gt;
          &lt;input type=&quot;text&quot; name=&quot;firstname&quot; value=&quot;Mickey&quot;&gt;
          &lt;br&gt;
          Last name:&lt;br&gt;
          &lt;input type=&quot;text&quot; name=&quot;lastname&quot; value=&quot;Mouse&quot;&gt;
          &lt;br&gt;&lt;br&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;button id=&quot;show&quot;&gt;Show form&lt;/button&gt;
  </code></pre>
  <p>And since <a href="https://stackoverflow.com">stackoverflow</a> lets you test the code, I did and it worked but when I tested it on my website it did not work. Here is the website <a href="http://flounder.epizy.com/tests/test-popup.html" rel="nofollow noreferrer">enter link description here</a>. Help is appreciated!</p>