Ultra-easy Modal Window Plugin - jQuery Modalize

Modalize is a plain and straightforward jQuery modal window plugin that is easy to implement via anchor links and HTML data attributes.

Whether you're building a new website or updating an existing project, jQuery Modalize is a helpful plugin that can be used to display additional information or interact with users without navigating away from the current page. 

How to use it:

1. Download the plugin and place the modalize.js script after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/js/modalize.js"></script>

2. Create an anchor link to toggle the modal window and define your own modal content using the following HTML data attributes.

<a href="#" 
   class="modal-button" 
   data-modal-title="My Modal Title" 
   data-modal-text="Text to show in modal">
   Open Modal
</a>

3. Initialize the Modalize plugin on document ready.

$(document).ready(function() {
  $('.modal-button').on('click', $(this).modalize);
});

4. Apply CSS styles to the modal window.

/* modal window */
.modal {
  position: absolute;
  width: 50%;
  max-width: 800px;
  height: auto;
  border: solid thin #eee;
  border-radius: 10px;
  padding: 20px;
  opacity: 1;
  box-shadow: 5px 5px 5px 1px #777;
}

/* background overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: #222;
}

/* close button */
.close-button {
  position: absolute;
  top: 5px;
  right: 0px;
  width: 20px;
  height: 20px;
  content: 'X';
  cursor: pointer;
}

/* modal title */
.modal-title {
  /* ... */
}

/* modal content */
.modal-text {
  /* ... */
}

---

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