Facebook Like jQuery Responsiv Modal Box Plugin - Mike's Modal Library

Mike's Modal Library is a jQuery plugin inspired by facebook's Photo viewing experience for creating responsive and flexible modal boxes in your website. The idea is to popup a photo gallery window where a photo is on the left and some content is meant for the right side.

How to use it:

1. Load the latest jQuery javascript library and mikes-modal.min.js script in your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="lib/mikes-modal.min.js" type="text/javascript"></script>

2. Create the html for the modal box

<div class="mikes-modal" id="myModal">
<img src='PATH TO YOUR IMAGE'>
<div class="description">
<div class='title-area'>
<h1>Title of Modal</h1>
<p>IMAGE DESCRIPTION</p>
</div>
</div>
</div>

3. Insert a link to trigger the modal box

<a id="open-mikes-modal">Try it now!</a>

4. The CSS for the modal box

.mikes-modal {
z-index: 10001;
position: fixed;
background-color: white;
left: 50%;
top: 50%;
display: none;
}
.mikes-modal a {
text-decoration: none;
}
.mikes-modal img {
float: left;
}
.mikes-modal .description {
width: 300px;
float: right;
text-align: left;
padding: 10px 30px;
overflow-y: auto;
}
.mikes-modal .close {
position: absolute;
right: 10px;
cursor: pointer;
opacity: 0.7;
}
#loading-modal {
position: absolute;
z-index: 10000;
width: 220px;
height: 220px;
top: 50%;
left: 50%;
margin-top: -110px;
margin-left: -110px;
background-color: #333;
border-radius: 20px;
}
#the-lights {
background-color: #000;
height: 100%;
width: 100%;
position: fixed;
opacity: 0.9;
top: 0;
left: 0;
z-index: 10000;
}
 @media all and (max-width: 700px) {
.mikes-modal {
left: 0%;
margin-left: 0px !important;
position: absolute;
}
.mikes-modal .description {
clear: both;
width: 95% !important;
float: left;
padding: 2.5%;
background-color: white;
}
.mikes-modal .close {
color: white;
top: 0px;
}
.mikes-modal img {
max-width: 100% !important;
max-height: 100% !important;
}
.mikes-modal #comments {
margin-top: 20px;
}
#comments-area .new-comment {
position: inherit;
width: 100%;
background-color: black;
}
}

5. Call the plugin

<script>

jQuery(function() {
  $("#open-mikes-modal").click(function(e) {
    e.preventDefault();
    $("#myModal").mikesModal();
  });
});

</script>

---

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