title: how to use glide.js carousel with popup modal?
body: <p>I'm trying to create a carousel that when clicked will open a popup modal containing another carousel (bigger resolution) using <code>glide.js</code>. so I'm trying to build a simple model first, which is a button to open a popup modal containing the big carousel. but I'm facing these problems:</p>
  <ol>
  <li><p>the DOMs keep exceeding the viewport's height</p>
  </li>
  <li><p>when the styles and script for the popup modal is applied, it became like the screenshot below (the image is broken and the browser's scrollbar exceeds the computer monitor)
  <a href="https://i.stack.imgur.com/7rhna.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7rhna.png" alt="after applying the styles and script for popup modal" /></a></p>
  </li>
  </ol>
  <p>here's my code</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/reset.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/glide.core.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/glide.theme.min.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/glide_style.css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/css/modal_style.css&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- Trigger/Open The Modal --&gt;
  &lt;button id=&quot;myBtn&quot;&gt;Open Modal&lt;/button&gt;
  
  &lt;!-- The Modal --&gt;
  &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class=&quot;modal-content&quot;&gt;
      &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
      &lt;!-- &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit.&lt;/p&gt; --&gt;
      &lt;div class=&quot;glide-container&quot;&gt;
          &lt;div class=&quot;glide&quot;&gt;
              &lt;div class=&quot;glide__track&quot; data-glide-el=&quot;track&quot;&gt;
                  &lt;ul class=&quot;glide__slides&quot;&gt;
                      &lt;li class=&quot;glide__slide&quot;&gt;
                          &lt;img class=&quot;slide-item&quot; 
                          src=&quot;https://images.pexels.com/photos/457882/pexels-photo-457882.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600&quot; 
                          /&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;glide__slide&quot;&gt;
                          &lt;img class=&quot;slide-item&quot; 
                          src=&quot;https://images.pexels.com/photos/186077/pexels-photo-186077.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600&quot; 
                          /&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;glide__slide&quot;&gt;
                          &lt;img class=&quot;slide-item&quot; 
                          src=&quot;https://images.pexels.com/photos/1661179/pexels-photo-1661179.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600&quot; 
                          /&gt;
                      &lt;/li&gt;
                      &lt;li class=&quot;glide__slide&quot;&gt;
                          &lt;img class=&quot;slide-item&quot; 
                          src=&quot;https://images.pexels.com/photos/38136/pexels-photo-38136.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=600&quot; 
                          /&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;glide__arrows&quot; data-glide-el=&quot;controls&quot;&gt;
                  &lt;button class=&quot;glide__arrow glide__arrow--left&quot; data-glide-dir=&quot;&lt;&quot;&gt;prev&lt;/button&gt;
                  &lt;button class=&quot;glide__arrow glide__arrow--right&quot; data-glide-dir=&quot;&gt;&quot;&gt;next&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script src=&quot;/assets/js/modal_script.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@glidejs/glide&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      const config = {
          type: 'carousel',
      };
      new Glide(&quot;.glide&quot;, config).mount();
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>reset.css</p>
  <pre><code>/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
      display: block;
  }
  body {
      line-height: 1;
  }
  ol, ul {
      list-style: none;
  }
  blockquote, q {
      quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
      content: '';
      content: none;
  }
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  </code></pre>
  <p>glide_style.css</p>
  <pre><code>html, body {
      height: 100%;
  }
  
  .glide__arrow {
      color: #a0a0a0 !important; 
  }
  
  .glide-container {
      height: 100vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .glide__slide {
      display: flex;
      justify-content: center;
      margin-top: auto;
      margin-bottom: auto;
  }
  </code></pre>
  <p>modal_style.css</p>
  <pre><code>body {font-family: Arial, Helvetica, sans-serif;}
  
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    position: relative;
  }
  
  /* The Close Button */
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  </code></pre>
  <p>modal_script.js</p>
  <pre><code>// Get the modal
  var modal = document.getElementById(&quot;myModal&quot;);
  
  // Get the button that opens the modal
  var btn = document.getElementById(&quot;myBtn&quot;);
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName(&quot;close&quot;)[0];
  
  // When the user clicks the button, open the modal 
  btn.onclick = function() {
    modal.style.display = &quot;block&quot;;
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
    modal.style.display = &quot;none&quot;;
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = &quot;none&quot;;
    }
  }
  </code></pre>
  <p>if there's a more suitable and easier library for this case, please recommend it to me..</p>