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.

Bootstrap jQuery modal

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.

 

The ID is used in the jQuery code, just above the </body> tag.

 

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:

Bootstrap jQuery modal animation

See online demo and code

Only this part is changed as compared to above example in the <script> section:

 

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:

Bootstrap jQuery modal

See online demo and code

This is how the button is created with Bootstrap classes:

 

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.