<html>
<head>
  <title>Modals examples</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.css" />
</head>
<body class="p4">
  
  <p>Default modal</p>
  <a class="button" data-modal="modal">Open</a>
  <div id="modal" class="modal-content">
    <div class="text">
      <h2>Header</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p>
        <a class="button" data-modal="modalChild1">Another window</a>
        <a class="button modal-customClose">Close</a>
      </p>
    </div>
  </div>
  <div id="modalChild1" class="modal-content">
    <div class="text">
      <h2>Another window</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p>
        <a class="button" data-modal="modalChild2">Another window</a>
        <a class="button modal-customClose">Close</a>
      </p>
    </div>
  </div>
  <div id="modalChild2" class="modal-content">
    <div class="text">
      <h2>Another window too</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p><a class="button modal-customClose">Close</a></p>
    </div>
  </div>

  <p>Effects</p>
  <a class="button" data-modal="modalEffectIn">Zoom in</a>
  <div id="modalEffectIn" class="modal-content effectIn">
    <div class="text">
      <h2>Header</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p><a class="button modal-customClose">Close</a></p>
    </div>
  </div>

  <a class="button" data-modal="modalEffectOut">Zoom out</a>
  <div id="modalEffectOut" class="modal-content effectOut">
    <div class="text">
      <h2>Header</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p><a class="button modal-customClose">Close</a></p>
    </div>
  </div>

  <a class="button" data-modal="modalEffectUp">Appear from bottom</a>
  <div id="modalEffectUp" class="modal-content effectUp">
    <div class="text">
      <h2>Header</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p><a class="button modal-customClose">Close</a></p>
    </div>
  </div>

  <a class="button" data-modal="modalEffectDown">Appear from top</a>
  <div id="modalEffectDown" class="modal-content effectDown">
    <div class="text">
      <h2>Header</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p><a class="button modal-customClose">Close</a></p>
    </div>
  </div>

  <p>Callbacks</p>
  <a class="button" data-modal="modalEvents">Check callback</a>
  <div id="modalEvents" class="modal-content">
    <div class="text">
      <h2>Header</h2>
      <p>Lake trout spookfish tilapia Australian prowfish amur pike yellowtail clownfish Chinook salmon ghost carp, cobia silver hake amur pike. Bluntnose minnow four-eyed fish! River loach zebra trout, "orangespine unicorn fish, sheatfish trout cod Ratfish; combtooth blenny." X-ray tetra kingfish duckbilled barracudina lefteye flounder snakehead cuckoo wrasse.</p>
      <p><a class="button modal-customClose">Close</a></p>
    </div>
  </div>

  <p>AJAX</p>
  <a class="button" data-modal="modalAjax">Check AJAX</a>
  <div id="modalAjax" class="modal-content">
    <div class="text">
      <h2>AJAX example</h2>
      <p id="modalAjaxContent">Loading...</p>
    </div>
  </div>

  <p>Iframe</p>
  <a class="button" data-modal="modalIframe">Open iframe</a>
  <div id="modalIframe" class="modal-content">
    <div id="modalIframeContent"></div>
  </div>

  <p>Images</p>
  <a class="button" data-modal="modalImage">View</a>
  <div id="modalImage" class="modal-content">
    <div id="modalImageContent"></div>
  </div>

  <p>Video</p>
  <a class="button" data-modal="modalVideo">Watch</a>
  <div id="modalVideo" class="modal-content">
    <div id="modalVideoContent"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/andreyshpigunov/auto@latest/dist/auto.js"></script>
  <script>auto.init()</script>
</body>
</html>
// Events
let modalEvents = document.querySelector("#modalEvents");
modalEvents.addEventListener("modal:ready", event => {
  alert("modal:ready");
});
modalEvents.addEventListener("modal:open", event => {
  alert("modal:open");
});
modalEvents.addEventListener("modal:close", event => {
  alert("modal:close");
});

// AJAX
let modalAjax = document.querySelector("#modalAjax");
modalAjax.addEventListener("modal:ready", event => {
  axios.get("https://raw.githubusercontent.com/andreyshpigunov/base/master/example.json")
    .then(response => {
      if (response.data.hasOwnProperty("months")) {
        let data = "";
        response.data.months.forEach(value => {
          data += value + "<br/>";
        });
        document.querySelector("#modalAjaxContent").innerHTML = "Месяцы:<br/>" + data;
      } else {
        document.querySelector("#modalAjaxContent").innerHTML = "Нет данных";
      }
    })
    .catch(response => {
      document.querySelector("#modalAjaxContent").innerHTML = "Произошла ошибка";
  })
});
modalAjax.addEventListener("modal:close", event => {
  document.querySelector("#modalAjaxContent").innerHTML = "Загрузка...";
});

// Iframe
let modalIframe = document.querySelector("#modalIframe");
modalIframe.addEventListener("modal:ready", event => {
  let html = '<iframe src="https://thegithubshop.com" width="100%" height="600"></iframe>';
  document
    .querySelector("#modalIframeContent")
    .insertAdjacentHTML("beforeend", html);
});
modalIframe.addEventListener("modal:close", event => {
  document.querySelector("#modalIframeContent").innerHTML = "";
});

// Images
let modalImage = document.querySelector("#modalImage");
modalImage.addEventListener("modal:ready", event => {
  let html = '<img src="https://placeimg.com/1200/800/any" style="width: 100%; height: auto"/>';
  document
    .querySelector("#modalImageContent")
    .insertAdjacentHTML("beforeend", html);
});
modalImage.addEventListener("modal:close", event => {
  document.querySelector("#modalImageContent").innerHTML = "";
});

// Video
let modalVideo = document.querySelector("#modalVideo");
modalVideo.addEventListener("modal:ready", event => {
  let html = '<div class="video"><iframe width="560" height="315" src="https://www.youtube.com/embed/axNnKy-jfWw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>';
  document
    .querySelector("#modalVideoContent")
    .insertAdjacentHTML("beforeend", html);
});
modalVideo.addEventListener("modal:close", event => {
  document.querySelector("#modalVideoContent").innerHTML = "";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.