Download
User Rating: 0.4/5 ( 2 votes)
Mike’s Modal Library is a Facebook like photo library written to support photos and comments on an individual photo. It features an image on the left and content on the right. The image scales to the largest size possible while still fiting in your monitors resolution.
This is a library for creating a facebook like modal box to be used. It features an image on the left and content on the right. The image scales to the largest size possible while still fiting in your monitors resultion
Source: https://github.com/mikesilvis/mikes-modal-library
1. INCLUDE STYLESHEET AND JAVASCRIPT
<link type="text/css" rel="stylesheet" media="all" href="https://raw.github.com/MikeSilvis/mikes-modal-library/master/lib/mikes-modal.css">
<script src="http://raw.github.com/MikeSilvis/mikes-modal-library/master/lib/mikes-modal.min.js" type="text/javascript"></script>
2. HTML
Create a div on your page with the class .mikes-modal
<div class="mikes-modal" id="myModal">
<img src='http://s3.amazonaws.com/ultimate_whip/garage_photos/photos/000/000/079/large/38779594009_original.jpeg?1349826286'>
<div class="description">
<h1>Title of Modal</h1>
<p>Put whatever content you need here. I personally used it for comments and tags :)</p>
</div>
</div>
Add a button, link, image or whatever you need to open the modal.
<a id="open-mikes-modal" class="btn btn-primary btn-large">Try it now!</a>
3. JAVASCRIPT
jQuery(function() {
$("#open-mikes-modal").click(function(e) {
$("#myModal").mikesModal();
});
});
Helpers
For custom functions you can bind / trigger the following manually:
$("#myModal").trigger("open");
$("#myModal").trigger("close");
$("#myModal").bind("open", function() {
myCustomFunction();
});
JS Tutorial
