Modal PopUp DMS

Category:

Become a Fenster Pro member and gain access to all of my plugins & sections!

Click here to become a Fenster Pro!

Already a member? Log In

Get it now!Modal PopUp is a powerful section for PageLines DMS. It uses DMS’s built in Twitter Bootstrap Modals to show an automatic PopUp window when your page first loads. You can easily customize the PopUp’s appearance, how often it appears, and even have different PopUps appear on different pages.

Features

DMS already has all the awesome features of Twitter Bootstrap integrated in its core. So you don’t have to spend any extra time waiting for an external Modal script to load. It’s already there, working seamlessly with DMS!

Normally, a regular Modal requires a trigger such as a link or a button to activate it.

However, with the Modal PopUp section, your PopUp pops-up automatically as soon as the page loads. So you don’t have to rely on your visitors clicking on a trigger to see your PopUp. That’s only part of the magic…

A "regular" Modal
A “regular” Modal
Now of course most people aren’t going to want to see a PopUp every time they go to your page. So to keep your PopUp from appearing all the time, Modal PopUp uses the jQuery Cookie Plugin by carhartl to manage your PopUps. When someone visits your page, Modal PopUp first checks to see if there is already a cookie from a previous visit. If no cookie is found, your PopUp appears, and the cookie is created. You can easily set your cookie expiration time, thus controlling how frequently your PopUp reappears.

Some browsers may be configured to not accept cookies. This would mean your PopUp would keep appearing every time because it didn’t detect a cookie from a previous visit. This could get quite annoying for visitors whose browsers aren’t accepting cookies. So by default, the PopUp won’t appear on browsers that don’t accept cookies. You can however turn this safety feature off.

You can configure your cookie in the Section Options
You can configure your cookie in the Section Options
There are two ways you can create your PopUp. You can type your PopUp HTML directly in the Section Options, or you can select one of your published WordPress pages to use instead. You can embed pictures, online videos, add inline CSS, and even shortcodes!
There are two ways to create your PopUp
There are two ways to create your PopUp
You can use any of the shortcodes listed on the DMS Tutorials Page, shortcodes from plugins like Gravity Forms, and even your own custom shortcodes.

All of these and more will work inside your PopUp.

Gravity Forms shortcode (See next page)
Gravity Forms shortcode (See next page)
You can easily change the width of your PopUp by setting the Width %, thus keeping your PopUp responsive. You can customize the “Close” button’s color and text, and even add a custom “Call to Action” button that will take your visitors to whatever URL you specify.

Modal PopUp uses {LESS.CSS} to generate the default background colors. This means that the Modal’s Header, Body, Footer, and text colors will match your site’s Color & BG Settings. However, you can easily change the color of each element to something different, including the color of the dark overlay surrounding your PopUp…

All from inside the Section Options!

Modal Appearance
Modal Appearance
There’s no limit to the number of PopUps you can put on your site. If you want to show a different PopUp on a particular page, just go into the Section Options for that page, create your PopUp, and assign a custom name to your cookie.

This way, if the default cookie has already been set in your visitor’s browser, your second PopUp will still appear using the new cookie.

Assign your cookie a custom name
Assign your cookie a custom name
Setup Instructions

Get it now!

Setup

  1. After you install and activate Modal PopUp DMS, go to the front end of the page/post that you want the PopUp to appear on.
  2. Click the “ Add To Page” button on your DMS toolbar, and then drag the Modal PopUp DMS section to somewhere on your page. The PopUp will work in any area you drag the section to, but there are some things to keep in mind:
    • If you want the same PopUp to be available on every page of your site, drag it to either the Header or Footer area, so you can configure your PopUp settings in the Global Options.
    • If you want the PopUp to only be available on a specific page, or if you want to show different PopUps on different pages, drag the section to the Template area. This way you can configure Local Options that are specific to that page.
    • If anyone shares the page on Facebook (or something similar), depending on which area the section is placed in, the contents of the PopUp might appear in the description on the Facebook news feed. When a page is shared on Facebook, Facebook first reads the page so it knows what information about that page to share. If you aren’t using any plugins that let you configure an og:description tag, Facebook will start reading at the top of the page and work its way down until it finds some content to use as the page’s description. So when dragging the section into your page, if you drag it above your Post Loop, Facebook will see the PopUp first, and use it as the page description instead of the Post Loop. You may or may not want this, so it’s up to you to decide the best place to drag the section to. To sum it up, if you don’t want the PopUp to be shared on Facebook, place the section either in the Footer (if you are using Global Options) or in the Template underneath the Post Loop (if you are using Local Options).
  3. After you drag the section to your page, the page will refresh and you will see a default sample PopUp. When this PopUp appears, it places a cookie on your computer that will expire in one hour. So if you refresh your page, you won’t see the sample PopUp again until you either delete the cookie from you computer, wait for it to expire, or assign that PopUp a different Cookie Name inside the Section Options.
  4. Click the section’s “Edit” button, and start customizing your PopUp. You can enter the Header and Body text right there in the Section Options, or you can assign the PopUp to an existing page to use for your content instead.
  5. Choose your other options for the PopUp, such as cookie settings, button configuration, and PopUp colors.

  Features   Extras  

Get it now!

Extras

Here’s some tips and bits of css to help out.

The beauty of the Modal PopUp section is that the PopUp will appear when the page loads, without your visitors having to click on a trigger. However you may want to disable the automation so that the PopUp won’t appear automatically when the page first loads. In which case, you will need to place a trigger link on your page that your visitors can click to manually open the PopUp. (This will also re-open the PopUp if left to appear on page load as intended.)

You just need to include href=”#ModalPopUp” data-toggle=”modal” in your link.

Here’s a few examples:

<a href='#ModalPopUp' data-toggle='modal' class='btn btn-important' role='button'>Here’s a Button!</a>

Here’s a Button!


<a href="#ModalPopUp" data-toggle="modal">Here’s a text link!</a>
Here’s a text link!


<a href="#ModalPopUp" data-toggle="modal"><img src="IMG URL" /></a>
Modal PopUp DMS Here's an Image!
Normally your PopUp will appear once, and then not again unless you either manually delete the cookie from your browser, give the cookie a new custom name, or wait for it to expire. While you’re configuring your PopUp, you probably don’t want to have to keep messing with the cookie to test your PopUp.

You could disable cookies on your browser, then check the “Force PopUp on browsers that have cookies disabled” setting, but there’s an easier way. You’ll notice in the cookie expiration settings, the smallest field you can set is the minute field, but you can actually go less than a minute by using a decimal number. So entering .001 in the minute field will make your cookie expire super fast.

Perhaps you don’t want the PopUp’s Header or Footer to display, and just want the content of your Custom Post Type. You can easily hide the header and footer with the following LESS/CSS:

If you remove the Footer, you’ll also be removing the “Close” button. So you might want to add that back inside your PopUp’s content:

<button class="btn btn-important" data-dismiss="modal" aria-hidden="true">Close</button>
When manually adding a button, whether it be inside your PopUp, or anywhere else on your PageLines site, there are several different colors to choose from. You must assign a specific class to the button to get the color you want. For example, “btn-primary” will produce the default blue button that you may have seen. Here’s all the classes you can use:


  Setup Instructions

Reviews

There are no reviews yet.

Be the first to review “Modal PopUp DMS”