title: Semantic UI modal not showing properly
body: <p>I've been working on a project that requires a Semantic UI modal (pop up) to show if I click the "View Details" button, but every time the modal pops up, it is positioned weirdly and I can't do anything with it (eg can't close it)
  <a href="https://i.stack.imgur.com/UHSa1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UHSa1.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my .ejs file and the script part of it</p>
  
  <pre><code>&lt;% include header.ejs %&gt;
  &lt;% include nav.ejs %&gt;
  &lt;div class="page-hero" style="background-image: url('004.jpg'); width: 100%;"&gt;
  &lt;h1 id="eachTitle"&gt;MY PROFILE&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="ui container"&gt;
  &lt;form method="POST"&gt;
      &lt;input type="text" name="search" placeholder="Search..." required class="searchBook"&gt;
      &lt;input type="submit" value="Search"&gt;
  &lt;/form&gt;
  &lt;% for(var i = 0; i &lt; results.length; i++){ %&gt;
      &lt;div class="ui grid"&gt;
          &lt;div class="column four wide"&gt;
              &lt;div class="ui card"&gt;
                  &lt;div class="image"&gt;
                      &lt;img src = "&lt;%= results[i].thumbnail %&gt;"/&gt;
                  &lt;/div&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="header"&gt;
                          &lt;h1 class="ui small header title"&gt;&lt;%= results[i].title %&gt;&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="meta"&gt;
                          &lt;p&gt;Author: &lt;%= results[i].authors %&gt;&lt;/p&gt;
                          &lt;p&gt;Published on: &lt;%= results[i].publishedDate %&gt;&lt;/p&gt;
                          &lt;p&gt;Pages: &lt;%= results[i].pageCount %&gt;&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="content extra"&gt;
                      &lt;button class="ui button fluid" id="detail"&gt;View Detail&lt;/button&gt;
                      &lt;button class="ui button fluid" type="button" name="button"&gt;Add&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="modaldiv" class="ui modal"&gt;
          &lt;i class="close icon"&gt;&lt;/i&gt;
          &lt;div class="header"&gt;
              Book info
          &lt;/div&gt;
          &lt;div class="content"&gt;
              &lt;div class="discription"&gt;
                  &lt;div class="ui header"&gt;Book Description&lt;/div&gt;
                  &lt;p&gt;&lt;%= results[i].description%&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="actions"&gt;
              &lt;div class="ui button"&gt;Delete&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;% } %&gt;
  
  
  &lt;/div&gt;
  &lt;% include footer.ejs%&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  $(document).on('click', '#detail', function(){
      $('.ui.modal').modal('show');
  });
  })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Everything is defined and the console shows no errors</p>
  
  <p>(Also if I render more than one book and try to click the view details button, the page just turns black, but I think that is a loop error)
  Does anyone know why it happens and how I can fix it?</p>