What Is FModal.JS?

FModal.JS is a lightweight JS library to create simple full-screen modals.
To sum up, FModal.JS comes into play when things don't fit in a tooltip.

How FModal.JS is useful?

FModal.JS helps you create not very extraordinary but simple modals with basic effects that you often need for your site.
Using a few attributes on any element gets your modals running.

Installation

You can simply clone using git

                     
                     git clone https://github.com/abhisack/fmodal.git
                     
                     

or install using npm

                     
                     npm install fmodal
                     
                     

Usage

All your working files are inside FModal.JS folder. Link jQuery, FModal.JS, modal.css to your page.

                     
                     
                      <script src="jquery.min.js"></script>
                      <script src="fmodal.min.js"></script>
                      <link rel="stylesheet" href="modal.css"></link>
                    
                    

Now FModal.JS is ready to work. What you need to do is assign the three attriutes data-entrance, data-title and data-text to any element with valid values.

                     
                     
                      <button data-entrance="modal-fade" data-title="Fade-in Modal" data-text="Hello! I'm a Fade-in modal.">Button-1</button>
                    
                    

data-entrance accepts one of the three available values on any element.

• modal-translate
• modal-scale
• modal-fade

data-title takes the value for the title of the modal and data-text for the text (main content) of the modal.

Note that inspite of having data-title and data-text on an element, modal won't open until data-entrance is assigned to that element with one of the three values listed above.

Inserting Button

If you want to give a link in your modal, you can do that by inserting a stylable button using following attributes:

• data-btn
• data-btn-text
• data-btn-link

             
             <button data-entrance="modal-scale" data-title="Zoom-in Modal". data-text="I'm a Zoom-in modal with a button." data-btn="yes" data-btn-text="Go to Codepen" data-btn-link="codepen.io">Zoom-in Modal</button>
             
             

data-btn set to "yes" decides whether button has to be inserted, data-btn-text sets text to the button and data-btn-link sets link to the button.

Styling the Modal

Quick styling can be done using variables in modal.scss (FModal.JS/modal.scss). After you've finished editing the variable values, Compile the file to get your modal.css (FModal.JS/modal.css) file ready to be used.

Take care that you compile modal.scssstrong> file inside FModal.JS folder not inside css folder in the root directory.

                     
                     
                     cd FModal.JS
                     sass --watch modal.scss
                    
                    

Browser Support

FModal.JS works in all latest browsers.

Why jQuery Dependent?

The whole little library is written in Vanilla JS (only single line of jQuery). And now it'd be striking your mind why it's jQuery dependent then? The reason is simple. Event Deligations! which jQuery handles so nicely.