modals made easy
You can download the ZIP from GitHub.
Since simple-modals uses jQuery, you must have it in your HTML. Add another script tag below the jQuery script tag and source it to the simple_modal_min.js file.
Then link the simple_modal_min.css file into your HTML and we are ready.
These are the modals which generally you create to display forms; a login, a sign-up form etc.
Following is a basic template to markup your modals.
<div class="simple-modal-wrapper" data-modal-id="my_modal_1" data-animation-duration="300">
<div class="modal-content">
<p class="modal-heading">Modal Heading</p>
<div class="modal-body">
The modal's content markup goes here
</div>
</div>
</div>The modal should be wrapped in div with class simple-modal-wrapper. Every simple-modal-wrapper should have the attribute data-modal-id whose unique value is set by you (here it is set as - my_modal_1).
The model content is then wrapped in div with class modal-content. You should then add a p tag and give it the class modal-heading.
<p class="modal-heading">My modal heading</p>
This p tag is then used as the header for the modal. You can omit this "p" tag if you want a modal without header. The actual markup of the modal content should be wrapped in a div with class modal-body.
Any click-able element can be used to open modals. Here is how to make a button that will trigger the above modal.
<button class="simple-modal-trigger" data-trigger-modal-id = "my_modal_1">Click me!</button>
Modal triggers are identified by the class simple-modal-trigger. The data-trigger-modal-id of the button and data-modal-id attribute of the simple-modal-wrapper should match.
By default, the modal header will have a click-able × mark to close the modal. The modal closes if user clicks outside it. Here is how you can make your own close button
<button type="button" class="simple-modal-close">Close Modal</button>
The class simple-modal-close is used to mark the button which will close the modal. This button, obviously, would be somewhere inside the modal-body; since that is the only area accessible to user when modal is active.
The animation duration could be set by adding the data-animation-duration attribute on the simple-modal-wrapper div. The attribute takes numbers in milliseconds and excluding it defaults to 200ms.
Setting data-animation-duration to 0 turns off the animation.
The modals could be fully styled using the same classes that are used in the markup. Here is differently styled modal.
By default the modals are centered on viewport using CSS3 transforms. This is the actual CSS used
.modal-content{
width: 95%; /* fall-back value for mobile size */
width: calc(100% - 20px);
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}If you don't want to use CSS transforms, you can override them and use your own styles to position the modal. Here is an example
div[data-modal-id="mod4"] .modal-content {
/*remove defaults*/
top:auto;
left:auto;
position: static;
-ms-transform: none;
-webkit-transform: none;
transform: none;
/*add your own*/
margin: 100px auto;
}
To make the modals responsive out of box, I have added few media queries. The default CSS is in mobile first format with min-width media queries at 480px, 768px and 1024px. Override these to suit your requirements.
As an addition, you can also use simple-modals library to create special image modals that display your images to the full screen. To do this add the "image-modal" class to the img tag like this
<img src="test.jpg" class="image-modal">
Now it becomes a zoom-able image which can be viewed in larger size on click. If image is smaller than the viewport, it will be centered. If it is larger than user's screen, it will scaled to biggest possible size without changing the aspect ratio of the image.
You can also set the data-animation-duration attribute on the img tag to change the animation speed or remove it.