Visual Composer

Modal Box

Add the stylish popup element on the page

Prev Pricing List 06 January 2017 Next Gallery Advanced 06 January 2017

Modal box allows you to add the content into a multipurpose and ultra stylish shortcode and create popup element on the page.

You customers will definitely notice it.

This is a nested shortcode – module that includes other modules. You may style the container and then fill it in with elements.

It is important to know, that in order to check the Modal Box popup window for the second time on the page, you need to clear all browser cache and cookies for the page in your browser!

Watch the video tutorial on Modal Box module creation for more details.

General settings

General settings

  • Display options – select the style of the displaying of the modal box element on the page.
    • Delay – select this style to set the delay for the modal box displaying.
    • On scroll – select this style to show the modal box on scroll.
  • Timeout – set the delay timeout for the modal box in milliseconds. For Delay style only.
Extra features
  • Animation – choose between 14 preset animation effects.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

Style settings

Style settings

  • Modal box size – specify the width of the modal box according to the width of the container.
  • Overlay background – select the background color for the content around the popup element. The default color is #000.
  • Overlay opacity – allows you to set the overlay’s opacity. The default opacity is 70%.
  • Background – select the background style for the modal box element.
    • Color – set the background color for the popup content. The default color is #fff.
    • Image – select this style to show the image as a background for the modal box.
      • Image background – select the image from the media library for the modal box background.
Modal box border settings
  • Border – select the border for the modal box. You may select solid, dashed, dotted, inset and outset variants.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}