Skip to content

Modal Box

Modal Boxes can be used for messages, advertising, donations, shopping carts and more. Below are example of buttons that open a modal box using the provided shortcode within the theme.

[modal align=”left” size=”small” color=”blue” title=”Modal Box Example” tag=”modal-1″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.[/modal]

[modal align=”left” size=”medium” color=”green” title=”Modal Box Example” tag=”modal-2″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.

  • List Item Example
  • List Item Example
  • List Item Example

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.[/modal]

[modal align=”left” size=”large” color=”yellow” title=”Modal Box Example” tag=”modal-3″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.[/modal]

[modal align="left" size="small" color="blue" title="Modal Box Example" tag="modal-1"]...[/modal]
[modal align="left" size="medium" color="green" title="Modal Box Example" tag="modal-2"]...[/modal]
[modal align="left" size="large" color="yellow" title="Modal Box Example" tag="modal-3"]...[/modal]

[modal align=”center” size=”small” color=”cyan” title=”Modal Box Example” tag=”modal-4″]Testing. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.[/modal]

[modal align=”center” size=”medium” color=”pink” title=”Modal Box Example” tag=”modal-5″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.

  • List Item Example
  • List Item Example
  • List Item Example

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.[/modal]

[modal align=”center” size=”large” color=”orange” title=”Modal Box Example” tag=”modal-6″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.[/modal]

[modal align="center" size="small" color="cyan" title="Modal Box Example" tag="modal-4"]...[/modal]
[modal align="center" size="medium" color="pink" title="Modal Box Example" tag="modal-5"]...[/modal]
[modal align="center" size="large" color="orange" title="Modal Box Example" tag="modal-6"]...[/modal]

[modal align=”right” size=”small” color=”white” title=”Modal Box Example” tag=”modal-7″]Testing. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.[/modal]

[modal align=”right” size=”medium” color=”red” title=”Modal Box Example” tag=”modal-8″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.

  • List Item Example
  • List Item Example
  • List Item Example

Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.[/modal]

[modal align=”right” size=”large” color=”black” title=”Modal Box Example” tag=”modal-9″]Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia.[/modal]

[modal align="right" size="small" color="white" title="Modal Box Example" tag="modal-7"]...[/modal]
[modal align="right" size="medium" color="red" title="Modal Box Example" tag="modal-8"]...[/modal]
[modal align="right" size="large" color="black" title="Modal Box Example" tag="modal-9"]...[/modal]

Make yourself heard!