A jQuery full screen modal: 3 demos with Bootstrap classes
The full-screen modal plugin
The ap-full-screen modal is a jQuery based plug-in that uses CSS3 animations. As the name shows, it is a full-screen modal window where you may present DOM elements like subscription forms, or other informative content.
The plug-in is light-weight, only 13Kb that includes CSS and JS files. See the following section for setting and using this modal plug-in in your web projects.
I have also included Bootstrap based markup, a form that uses Bootstrap classes as using this modal plug-in. let me start by a simple example.
A demo of full screen modal component
As you click the button in the demo page (links are given below), the modal window appears with a simple form.
See online demo and code
For making this plugin functional in your web pages, first include the ap-fullscreen-modal.css, style.css, jQuery JS file and plug-in JS files in the <head> section. You may get the package here.
In the markup section, a button is created with an id.
|
1 |
<input type="button" value="Click here to open modal" id="modal-demo" /> |
The ID is used in the jQuery code, just above the </body> tag.
|
1 2 3 4 5 6 7 |
$('#modal-content-1').apFullscreenModal({ openSelector: '#modal-demo', closeSelector: '.close-modal, #send-1' }); |
Get the complete code in the demo page.
A demo with animated opening and closing of modal
This time, the modal window opens slowly which is done by using the animation duration option in the <script> part of jQuery. In the demo, I used 1500 values that mean 1.5 seconds. See the demonstration online:
See online demo and code
Only this part is changed as compared to above example in the <script> section:
|
1 2 3 4 5 6 7 8 9 10 11 |
$('#modal-demo-contenr').apFullscreenModal({ backgroundColor: '#fafafa', openSelector: '#modal-demo', closeSelector: '.close-modal, #send-2', animationDuration: 1500 }); |
A demo of using this with Bootstrap classes
As such Bootstrap is a popular web framework these days, the following example uses Bootstrap classes for various buttons and content of the modal window. Although I have covered the modal component of Bootstrap framework in its tutorial, the purpose is to show you may use this plug-in if you are working with Bootstrap.
So here you go with the demo where a form will be opened:
See online demo and code
This is how the button is created with Bootstrap classes:
|
1 |
<button class="btn btn-danger" id="modal-demo">Click here to open modal</button> |
The same ID is given that is used in the <script> part.
The form opened in modal uses different Bootstrap and a custom CSS classes for styling the input fields.