title: Bootstrap 4 modal is not displaying
body: <p>I have a simple design with an image inside a centered div.  Over the image is a semi-opaque textbox with an h1 element.  I want a bootstrap 4 modal component to pop-up after the h1 is clicked.  I have followed various tutorials for building the modal, but I can't seem to get it working.  I'm not sure what the issue could be.  </p>
  
  <p>If someone could take a look and give me some guidance, it would be greatly appreciated.</p>
  
  <p>The CodePen: <a href="https://codepen.io/dayna-j/pen/RMZdej?editors=0010" rel="nofollow noreferrer">https://codepen.io/dayna-j/pen/RMZdej?editors=0010</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;head&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div class='img-div'&gt;
      &lt;img src="https://image.ibb.co/eZcdEn/nature_3084841_1920.jpg" alt='close up of grass'/&gt;
      &lt;div class='textBox-div'&gt;      
        &lt;h1 class = no-select data-toggle="modal" data-target="#Modal"&gt;Click Me&lt;/h1&gt;
      &lt;/div&gt;
  
  
        &lt;!-- Modal (inside img-div) --&gt;
      &lt;div id="Modal" class="modal fade" role="dialog"&gt;
        &lt;div class="modal-dialog"&gt;
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
           &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
           &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;p&gt;Some text in the modal.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The CSS: </p>
  
  <pre><code>.no-select {
  user-select: none;
  }
  
  html {
  
  
   box-sizing: border-box;
    background-color: black;
    // overflow:hidden;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  * { 
    margin: 0;
    padding: 0; 
  }
  
  body{
    background: #232526;
    // background: papayawhip;
    display: flex;
    justify-content: center;
    align-items: center;
    // border: 5px solid green;
    // border-radius: 1000px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
  }
  
  .container-fluid {
    position: relative;
    height: 100%;
    width: 100%;
  }
  
  .img-div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  img {
    // position: relative;
    max-height: 500px;
    max-width: 850px;
    width: 100%;
    border: 1px solid grey;
    // border-radius: 1000px; 
  }
  
  .textBox-div { 
    position: absolute;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    background: whitesmoke;
    opacity: .5;
  }
  
  .textBox-div h1 {
    font-family: 'Fredericka the Great', cursive;
    margin: auto 0;
    font-weight: 900;
  }
  
  @media screen and (max-width:400px)
  {
    h1 {font-size: 1.5em;}
  }
  
  @media screen and (max-width:200px)
  {
    h1 {font-size: 1em;}
  }
  </code></pre>
  
  <p>The JavaScript: </p>
  
  <pre><code>$( document ).ready(function() {
  
    $('#Modal').modal('hide');
  
  
    $('h1').on('click', function(){
      $('#Modal').modal('show');
    });
  
  });
  </code></pre>