Modal Dialog Pro


The Modal Dialog With No Peer

What is it?
A modal dialog is a way to display a popup alert box on a web page. Unlike the traditional browser popup alerts, you can customize a modal dialog so it looks good and fits your web pages.

Unique

Modal Dialog Pro is unique because it focuses on applications. What does this mean?

It is designed to cover most, if not all, the use-cases that are associated with showing modal dialog popups. Want it to show after a user scrolls down the page halfway? Sure. How about after a certain amount of time has passed? Yep.

View the demo here

Make Sure Everyone Sees Your Message


You can get Modal Dialog Pro to show when:

  • - a user clicks on a link
  • - when the page is loaded
  • - when the page is scrolled down
  • - when a set period of time has passed
  • - when the user's mouse leaves the page.

Audio Support

If that's not enough to get your users' attention, Modal Dialog Pro optionally lets you play a sound when it opens. You can use it to play a chime, for example, or a short greeting.

That is a sure attention-grabber.

Redirection

Want to send the user to another page when the modal dialog is dismissed? No problem, this is easily done with Modal Dialog Pro.

Features

  • - Responsive.
  • - Supports 5 different ways of triggering the Modal Dialog.
  • - Lets you play a sounds when shown.
  • - Takes text, images and videos

The Modal Dialog Pro Stack


General Options

Type of Modal: choose between the following:

  1. Generic - this is what you want to use unless you need "Cancel" and "OK" buttons.
  2. Alert - this will display a modal dialog with an "OK" button.
  3. Confirm - this will display a modal dialog with "OK" and "Cancel" buttons. In addition, you can enter your own simple javascript functions that will run when the user clicks the "OK" button. For example, you can have it so that clicking the "OK" button takes the user to another page.

When To Show: use this to control when to display the modal dialog.

BG Click To Close: if set to no, the modal dialog can only be closed by clicking the close button, or the OK and Cancel buttons.

Redirect On Close/Redirect Close: lets you redirect the user to another page when the modal dialog is closed.

Autoclose/Autoclose Time: lets you specify a time delay after which the modal dialog is automatically closed.

Appearance

Width: on non-mobile browsers, this sets the width of the modal dialog to either Normal or Wider.

Overlay BG/Opacity: these options control the overlay background color and the overlay opacity.

Body BG: you can set the background color of the modal dialog's body area here.

Use Header/Header BG: if you want the modal dialog to have a header section, you can set it here.

Use Footer/Footer BG: if you want the modal dialog to have a footer section, you can set it here.

Use Caption: if you want the modal dialog to have a caption, you can set it here.

Close Button: choose between 2 different appearances of the Close button.

Close Color/Color Hover: these options affect the color of the Close button and the color of the Close button when the mouse is hovered over it.

Sound

Play Sound: choose Yes here to play a sound when the modal dialog is displayed. This will help in getting the attention of your viewers.

Sound File: enter the path or full URL of the sound file here. MP3s are preferred. To test, you can try pasting this in: http://www.cosculture.com/static/demo/modal-dialog-pro/modal_sound.mp3

Workaround

Shift Workaround: in a few themes, there may be a slight shifting of the page when the modal dialog is showing. This slight shift recovers when the modal dialog closes. This option tells the modal dialog to attempt to work around that.


Adding The Trigger

Let's assume you have some text on the page. This piece of text is what you want users to be clicking on.

Select the text you want to use as the trigger. The trigger is what the users will click on to make the Responsive Lightbox show up. Remember that this can also be an image.

In the URL field, add a "#". Then click on the "+" button, and add a name called "id" and a unique value in the value field. This unique value cannot have spaces.

Then click "Set Link".

Requirements

  • - RapidWeaver 5, 6 or 7
  • - Stacks 2 & 3
Modal Dialog Pro Demo

Modal Dialog Pro can be triggered in a variety of ways to fit all kinds of use cases.

This demo is triggered manually by you clicking the demo link, but it could have been triggered when the page is loaded, or by the mouse leaving the window, or after the page has been scrolled, or after a set time has elapsed.

Optional Caption

Stacks . Images & Videos . Social . Lightboxes . Layout . Publishing . Utilities .
Bundles . Support .