Modalite Demo

Three examples of how to use the simplest JavaScript modal library.

HTML

<script src="https://unpkg.com/[email protected]/dist/modalite.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/modalite.min.css">
<p>View Modalite on <a target="_blank" href="https://github.com/hdodov/modalite/">GitHub</a>.</p>
<hr>

<a href="#" data-open-modal="my-modal">Open modal!</a>
<br>
<a href="#" data-open-modal="my-remote-modal">Open remote modal!</a>
<br>
<a href="#" data-open-modal="my-simple-modal">Open simple modal!</a>

<div id="my-modal" class="modal" data-modal>
  <div class="modal-container">
    <div class="modal-close" data-close-modal></div>
    <div class="modal-content">
      <h1>Nice modal, eh?</h1>
    </div>
  </div>
</div>

<div id="my-remote-modal" class="modal" data-modal data-modal-has-remote>
  <div class="modal-container">
    <div class="modal-close" data-close-modal></div>
    <div class="modal-content">
      <h1>Look at that remote text:</h1>
      <div data-modal-remote="https://baconipsum.com/api/?type=all-meat&format=html"></div>
    </div>
  </div>
</div>

<!--
  This one doesn't use the Modalite CSS styles, yet still works.
  You have the freedom to style your modal in any way you desire!
-->
<div id="my-simple-modal" class="simplemodal" data-modal>
  <p>Wait, that doesn't look a modal at all! Correct. You have the freedom to style it however you wish!</p>
  <a href="#" data-close-modal>Close me!</a>
</div>

CSS

.simplemodal {
  display: none;
  
}

.simplemodal.modal-visible {
  display: block;
}

.modal {
  width: 90% !important;
}