Modal

Back

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 shortcode

Modal 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]
FADE IN AND SCALE

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.
SLIDE IN (RIGHT)

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.
SLIDE IN (BOTTOM)

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.
NEWSPAPER

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.
FALL

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.
SLIDE FALL

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.
STICKY UP

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.
3D FLIP (HORIZONTAL)

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.
3D FLIP (VERTICAL)

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.
3D SIGN

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.
SUPER SCALED

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.
JUST ME

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.
3D SLIT

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.
3D ROTATE BOTTOM

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.
3D ROTATE IN LEFT

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.
LLIP FROM TOP

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.
LET ME IN

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.
MAKE WAY!

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 Text Change Example

You can change modal button text. for that reason just insert this shortcode & type button text as you need.

Get shortcode

Modal 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]
Trigger me!

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.
Click me!

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.
Press me!

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 shortcode

Modal 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]
No Button Class

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.
Default Button

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.
Danger Button

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.
Border Button

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 shortcode

Show 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]
With Close Button

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.
Call Back Close Button

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 shortcode

Modal 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]
SLIDE IN (RIGHT)

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.
SLIDE IN (BOTTOM)

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 shortcode

Modal 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]
SLIDE IN (RIGHT)

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 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 shortcode

Modal 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]
NEWSPAPER

You can change title color

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 shortcode

Modal 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]
SLIDE IN (RIGHT)

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.
SLIDE IN (BOTTOM)

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.
NEWSPAPER

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 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 shortcode

Modal 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]
SLIDE IN (RIGHT)

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.
SLIDE IN (BOTTOM)

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.
NEWSPAPER

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 Border Example

You can give awesome border for modal. so just use this shortcode select border option as you want

Get shortcode

Modal 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]]
SLIDE IN (RIGHT)

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 Shadow Example

You can give box shadow of modal. so just use this shortcode select box shadow option as you want

Get shortcode

Modal 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]
SLIDE IN (RIGHT)

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.
SLIDE IN (BOTTOM)

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 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 shortcode

Modal 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]
(380 X 380)px Example

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.
(400 X 400)px Example

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 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 shortcode

Modal 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]
FADE IN AND SCALE

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.
SLIDE IN (RIGHT)

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.
SLIDE IN (BOTTOM)

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.

Real life example

You can use as modal content text, images, oteher shortcode. we give same example right side.

Get shortcode

Real 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]
Contact Us Example

Contact With us

Log in

Need Shortcode Ultimate Documentation?

Click the documentation link and go there for shortcode ultimate plugin documentation!
DOCUMENTATION

Hey Wait Wait!

I hope you you like me! if you want to purchase so please: CLICK FOR DOWNLOAD