Inline Modal ModalWindowJS - Download Basic Inline Modal Popup Plugin - ModalWindowJS

Download Basic Inline Modal Popup Plugin – ModalWindowJS

By Posted on

This time I will share jQuery Plugin and tutorial about Basic Inline Modal Popup Plugin – ModalWindowJS, hope it will help you in programming stack.

Inline Modal ModalWindowJS - Download Basic Inline Modal Popup Plugin - ModalWindowJS
File Size: 27 KB
Views Total: 1615
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

ModalWindowJS is a jQuery based modal plugin for creating inline modal windows that pop up in front of other elements on the webpage.

How to use it:

1. Include the necessary JavaScript and CSS files on the webpage.

view source
1 <script src="https://code.jquery.com/jquery-3.3.1.min.js"
2         integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
3         crossorigin="anonymous">
4 </script>
5 <script src="js/modal-window.js"></script>

2. Insert your own modal content and a close button to the modal. Note that modal content will be hidden until triggered.

view source
1 <div class="modalContent example">
2   <p class="closeBtn">Close</p>
3   <p>Modal Content Here</p>
4 </div>

3. Create a trigger button and specify the target modal content using the ‘data-modal’ attribute:

view source
1 <button class="trigger"
2         data-modal="singular">
3         Launch The Modal
4 </button>

4. Initialize the modal plugin with default settings.

view source
1 $(function(){
2   $(document).modalWindow();
3 });

5. Apply your own CSS styles to the modal window.

view source
01 #overLay{
02   position: fixed;
03   top: 0;
04   left: 0;
05   z-index: 900;
06   width: 100%;
07   height: 100%;
08   background: rgba(0,0,0,0.5);
09 }
10  
11 .modalContent {
12   display: none;
13   overflow:auto;
14   position: absolute;
15   z-index: 1000;
16   padding: 20px;
17   background:#ffffff;
18   color: #000000;
19 }
20  
21 .closeBtn{
22   position: absolute;
23   top: 10px;
24   right: 10px;
25 }

6. To customize the modal window, override the following settings and then pass them to the ‘modalWindow()’ function.

view source
01 $(document).modalWindow({
02  
03   // default CSS selectors
04   "openTrigger": ".trigger",
05   "closeTrigger": ".closeBtn",
06   "modalContent": ".modalContent",
07   "overLay" : "overLay",
08  
09   // width/height of the modal window
10   "width" : 500,
11   "height": 500,
12  
13   // animation speed in milliseconds
14   "feadSpeed" : 500
15    
16 });

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

source : jquery.net

Related posts: