Basic jQuery Modal Dialog Plugin - Mirekbenes Modal

A simple and easy way of creating modal dialog windows with fade and slide animations in jQuery. Click the esc key, close button and overlay will close the modal window.

How to use it:

1. Add the following CSS snippet in your CSS file or include the modal.css in the head section of the document. Feel free to change the CSS styles to create your own modal style.

.mb-modal-overlay {
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: .4;
filter: alpha(opacity=40);
}
.mb-modal {
display: none;
float: left;
position: absolute;
z-index: 101;
top: 100px;
left: 50%;
width: 420px;
padding: 20px;
background: #fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
#modal-1 {
width: 600px;
}

2. Create a link to open the modal. You can both use data-modal-open attribute or click function to specify the modal's container.

<a href="#" data-modal-open="modal-1">Show</a>
<a href="#modal-2" class="open-modal-2">Manual configuration</a>

3. Create a container with modal content.

<div id="modal-1" class="mb-modal">
...
</div>

<div id="modal-2" class="mb-modal">
...
</div>

4. Load the jQuery javascript library and jQuery Mirekbenes Modal plugin at the end of the document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/modal.min.js"></script>

5. Call the plugin with manual configurations

<script type="text/javascript">
$(function (){
$('.open-modal-2').click(function(e) {
e.preventDefault();
$('#modal-2').mbModal({
 animation: 'slideFade', // fade, none is default
animationspeed: 600,
overlayClose: false, // false, true is default
escClose: false // false, true is default   
});
});
});
</script>

---

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