We give for your always help show the shortcode Modal example below. you can get facility items Modal effect, button text, button class, close button, modal title, title background, title color, modal background, modal color, modal border, modal shadow, modal width, modal height, overlay background, extra Class & Content. You are actually use this shortcode and get modal style.
Modal Effect (18) Example
You can get 18+ modal effect. For that reason just insert modal shortcode. and select modal effect as you need. default effect is fade in and scale
Get shortcodeModal Effect Example
[modal effect="1" button_text="FADE IN AND SCALE" button_class="readon uk-margin-small" close_button="yes" title_color="#ffffff" title="Modal Box Title" background="#1abc9c" color="#fff" overlay_background="rgba(26, 188, 156,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Button Text Change Example
You can change modal button text. for that reason just insert this shortcode & type button text as you need.
Get shortcodeModal Button Text Change Example
[modal button_text="Trigger me!" button_class="readon uk-margin-small-bottom" title_color="#ffffff" title="Modal Box Title" background="#95a5a6" color="#fff" overlay_background="rgba(149, 165, 166,0.4)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Button Class Change Example
You can change modal button class. for that reason just insert this shortcode & type button class. you can use any button class.
Get shortcodeModal Button Class Change Example
[modal button_text="No Button Class" button_class="uk-margin-small-bottom" title_color="#ffffff" title="Modal Box Title" background="#95a5a6" color="#fff" overlay_background="rgba(149, 165, 166,0.4)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Show Modal Close Button Example
If you want to visable close button. so, set yes to get modal close button
Get shortcodeShow Modal Close Button Example
[modal button_text="With Close Button" button_class="readon uk-margin-small-bottom" close_button="yes" title_color="#ffffff" title="Modal Box Title" background="#c0392b" color="#fff" overlay_background="rgba(192, 57, 43,0.4)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Title
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Title Customized Example
You can change modal tile for that reason just use this shortcde type your title as you need.
Get shortcodeModal Title Customized Example
[modal effect="2" button_text="SLIDE IN (RIGHT)" button_class="readon uk-margin-small" title_color="#ffffff" title="Modal box title can be changed!" background="#2ecc71" color="#fff" overlay_background="rgba(46, 204, 113,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
Modal box title can be changed!
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Neque porro quisquam est?
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Title Background Color Example
You can give any background color of modal title. for that reason just use this shortcde select modal title background as your like.
Get shortcodeModal Title Background Color Example
[modal effect="2" button_text="SLIDE IN (RIGHT)" button_class="readon uk-margin-small" title_color="#ffffff" title_background="rgba(0,0,0,0.5)" close_button="yes" title="Modal box title" background="#2ecc71" color="#fff" overlay_background="rgba(46, 204, 113,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Title Color Example
You can give any color of modal title. for that reason just use this shortcde select modal title color as your like.
Get shortcodeModal Title Color Example
[modal effect="4" button_text="NEWSPAPER" button_class="readon uk-margin-small" close_button="yes" title_color="rgba(255, 255, 255, 0.3)" title="You can change title color" background="#9b59b6" color="#fff" overlay_background="rgba(155, 89, 182,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Background Color Example
You can give any background color of modal box. for that reason just use this shortcde select modal background color as your like.
Get shortcodeModal Background Color Example
[modal effect="2" button_text="SLIDE IN (RIGHT)" button_class="readon uk-margin-small" close_button="yes" title_color="#ffffff" title="Modal Box Title" background="#2ecc71" color="#fff" overlay_background="rgba(46, 204, 113,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Color Changed Example
You can give any color of modal box. for that reason just use this shortcde select modal color as your like.
Get shortcodeModal Color Changed Example
[modal effect="2" button_text="SLIDE IN (RIGHT)" button_class="readon uk-margin-small" close_button="yes" title_color="#ffffff" title="Modal Box Title" background="#2ecc71" color="#444" overlay_background="rgba(46, 204, 113,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Border Example
You can give awesome border for modal. so just use this shortcode select border option as you want
Get shortcodeModal Border Example
[modal effect="2" button_text="SLIDE IN (RIGHT)" button_class="readon uk-margin-small" close_button="yes" border="5px solid rgba(127, 210, 118, 0.8)" title_color="#ffffff" title="Modal Box Title" background="#2ecc71" color="#444" overlay_background="rgba(46, 204, 113,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/moda]]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Box Shadow Example
You can give box shadow of modal. so just use this shortcode select box shadow option as you want
Get shortcodeModal Box Shadow Example
[modal effect="2" button_text="SLIDE IN (RIGHT)" button_class="readon uk-margin-small" close_button="yes" shadow="5px 5px 0px rgba(39, 174, 96,0.3)" title_color="#ffffff" title="Modal Box Title" background="#2ecc71" color="#444" overlay_background="rgba(46, 204, 113,0.3)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Height & Width Example
You can changed modal height and width. so just use this shortcode select modal height and width as you need. default height is auto
Get shortcodeModal Height & Width Example
[modal effect="9" button_text="(380 X 380)px Example" button_class="readon uk-margin-small" close_button="yes" title_color="#ffffff" title="Modal Box Title" background="#8e44ad" color="#fff" overlay_background="rgba(142, 68, 173,0.4)" height="380px" width="380px"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Modal Overlay Example
You can changed modal overlay background color. so just use this shortcode select overlay color as you need. default color is rgba(0,0,0,0.3)
Get shortcodeModal Overlay Example
[modal effect="1" button_text="FADE IN AND SCALE" button_class="readon uk-margin-small" close_button="yes" title_color="#ffffff" title="Modal Box Title" background="#1abc9c" color="#fff" overlay_background="rgb(20,143,118)"] <p>This is a modal window. You can do the following things with it:</p> <ul> <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li> <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li> <li><strong>Close:</strong> click on the button top right corner to close the modal.</li> </ul> [/modal]
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
This is a modal window. You can do the following things with it:
- Read: modal windows will probably tell you something important so don't forget to read what they say.
- Look: a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.
- Close: click on the button top right corner to close the modal.
Real life example
You can use as modal content text, images, oteher shortcode. we give same example right side.
Get shortcodeReal life example
[modal effect="1" button_text="Contact Us Example" button_class="readon uk-margin-small" close_button="yes" title_color="#ffffff" title="Contact With us" background="#ffffff" color="#fff" overlay_background="rgba(0, 0, 0, 0.1)" title_background="rgba(0,0,0,0.4)"] [contact_form] [/modal]