Simplest jQuery Modal Window Plugin - rsModal

File Size: 4.73 KB
Views Total: 1040
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simplest jQuery Modal Window Plugin - rsModal

rsModal is a minimal jQuery modal window plugin that works with any Html content and requires no images, CSS or other dependencies.

How to use it:

1. Load jQuery library and the jQuery rsModal plugin in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.rsModal.js"></script>

2. Create content to be embedded into the modal window.

<div id="modalcontent" class="modal">
  Modal content here
</div>

3. Hide the modal window on page load.

.modal {
  display: none;
}

4. Create a button to trigger the modal content (OPTIONAL).

<button class="myModal">Open Modal</button>

5. The JavaScript to enable the modal plugin.

$('.myModal').click(function(){
  $('.modal').rsModal();
});

6. Customization options..

$('.myModal').click(function(){
  $('.modal').rsModal({
  background  : '#FFF',
  height    : '323px',
  width     : "500px",
  top     : "50%",
  left    : "50%",
  marginL   : '-250px',
  marginT   : '-161px',
  title     : 'rsModal'
  });
});

Change log:

2016-07-07

2015-03-05

  • Click event for closing modal down

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