Basic Modal Window With Inline Content - jquery.modal.js

An ultra simple jQuery plugin for showing a responsive, CSS3 animated modal window with inline contents from a DIV element.

How to use it:

1. Link to necessary JavaScript and CSS files.

<link rel="stylesheet" href="css/modal.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/jquery.modal.js"></script>

2. Insert the modal content into a DIV container.

<div class="modal">
  <div class="modal-content">
    <span class="close">X</span>
    <p class="modal-text">Modal Content</p>
  </div>
</div>

3. Create a trigger button to toggle the modal window.

<button class="modalbtn">open modal</button>

4. Enable the trigger button to toggle the modal window. Done.

$(document).ready(function(){
    
  $(".modalbtn").modal();
    
});

5. Customize the styles of the modal window.

.modal{
  display: none;
  position: fixed;
  z-index: 1;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}

---

This awesome jQuery plugin is developed by karolinaklein. For more Advanced Usages, please check the demo page or visit the official website.