Free Webflow Functions

img

Chrome Extension

img
Back

Modal

Dynamic Webflow Modal with the best collection

Cloneable

Documentation

Documentation

Step 1

1. Copy the modal <script> and paste into the <before closing body> of your page

                                <script src="https://flowgiri.com/js-library/modal.min.js"></script>

Step 2

1. Include a unique name as the value and assign the flowgiri-modal attribute to the div block.

Name:

flowgiri-modal

Value:

"[modal-unique-name]"

2. Take a button inside the flowgiri-modal div block and add flowgiri-modal-close attribute to the button.

Name:

flowgiri-modal-close

Value:

" "

3. To open the modal by clicked take a button and add flowgiri-modal-open attribute to the element and give the modal name as a value. When clicked on that element the modal will open.

Name:

flowgiri-modal-open

Value:

"[modal-unique-name]"

Optional

1. To include an overlay, create a div block outside of the modal div and assign the flowgiri-modal-overlay attribute to it.

Name:

flowgiri-modal-overlay

Value:

" "

2. To display a modal automatically after the page loads, assign the flowgiri-modal-type attribute to the flowgiri-modal div block and set the value to auto.

Name:

flowgiri-modal-type

Value:

"auto"

3. When you set an auto modal, it will appear after 5 seconds by default. To adjust the duration of time include the modal-autoplay attribute within the flowgiri-modal div block and set the value to the desired number of seconds.

Name:

modal-autoplay

Value:

"3"

Take idea from an example. 

 <div flowgiri-modal="login-modal"  flowgiri-modal-type="auto"  modal-autoplay="3" >
    your content
   <button flowgiri-modal-close=" "  > close </button> 
   </div>
   <div flowgiri-modal-overlay=" " ></div>
 
   <button flowgiri-modal-open="login-modal" > open modal </button>

Get the latest updates to your inbox.