title: How to make a html box appear on page using JavaScript/JQuery?
body: <p>How can I open an section of html with an id using JS/JQuery?</p>
  
  <p>Lets say the html I want to trigger with JS/JQuery is</p>
  
  <pre><code>&lt;section class="modal--show" id="show"
          tabindex="-1" role="dialog" aria-labelledby="label-show" aria-hidden="true"&gt;
  
      &lt;div class="modal-inner"&gt;
          &lt;header&gt;
              &lt;h2 id="label-show"&gt;A modal&lt;/h2&gt;
          &lt;/header&gt;
  
          &lt;div class="modal-content"&gt;
              &lt;p&gt;Content.&lt;/p&gt;
                 &lt;div id="badgeselect"&gt;
  
          &lt;/div&gt;
  
          &lt;footer&gt;
              &lt;p&gt;Footer&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p>I've tried using </p>
  
  <pre><code> $('#show').dialog('open');
  </code></pre>
  
  <p>which doesn't work. The only other consideration is, that the full code must also copy an image that the user clicks on (to activate <code>show</code>) </p>
  
  <p>I have this at the moment, the only part not working is making the above code show on the page after the user has clicked the image.</p>
  
  <pre><code>    $(document).ready(function() {
          $('.go img').css('cursor', 'pointer');
          $('.go').on('click', 'img', function(e) {
              $(this).width(100).height(100).appendTo('#badgeselect');
  
                $('#show').dialog('open');
  
              });
              SaveMyBadge();
              return false;
          });
  </code></pre>