Default menu not set, contact Site builder

Modal Windows

Modal windows are optional built-in functionality to the Captavi platform. These modals are designed to:

  • Display hidden content on a page
  • Load in content from another page
  • Load in an image file from the asset manager 

The built in modal window system does not require Jquery, Bootstrap, or any other library. It is a plain JavaScript function that runs independently of any other library. It can be placed anywhere throughout a site. It can even be used in tandem with other modal windows.

Getting Started

First the script must be added to the header, footer, or indextemplate of your site. This can be achieved by either placing the following script tag into the .html template files, or by placing the script into the site settings header/footer scripts text area box. The latter implementation step is perfect for legacy installations.

<script type="text/javascript" src="/js/modal.js"></script>

The script will run automatically and look for a tag links that have a rel="modal". It will then bind an onClick event to those links to launch the modal window. If the end user does not have JS running they will get a normal and functional link.

Styling

The css for the modal window is already built into our latest features.css file located in the /css directory of the site. If a client has chosen to keep a specific version of the features.css file in their /Themes/css folder they will require a manual update. 6 tags have been added to give incredible styling flexibility to the modal window.

  1. CaptaviModalOverlay - The dark color behind the modal. Great for directing attention to the modal.
  2. CaptaviModalWindow - The background of the modal itself.
  3. CaptaviModalTitle - This holds the top most line or lines of text inside the modal window above the content area.
  4. CaptaviModalClose - This is class is within the CaptaviModalTitle area. The addition of this class provides finite control to the "x" or close button at the top right (by default) of the modal window.
  5. CaptaviModalBody - Will hold all of the content for the modal window. This is a great place to create a specific typographical look and feel for the presentation of the information within the modal window.
  6. CaptaviModalLoading - This appears briefly within the CaptaviModalBody area while AJAX operations are in progress.

Default provided features.css versions of the above IDs/Classes utilize % widths and heights where appropriate. However their may be some edge cases that require a more finite control of the maximum sizing for certain aspects of the modal window. Feel free to incorporate media-width checks into css and overwrite the base max-height or max-width directives to fit any specific use case.

The CaptaviModalLoading tag has a built in background image. This .gif file is an animated loader. It will indicate to users that something is currently loading. This loading image can be overwritten in the layout.css file and utilize any custom image required.

#CaptaviModalLoading{
    font-size: 0px;
    width: 100%;
    display: block;
    text-align: center;
    min-height: 50px;
    margin-top: 30px;
    background: url("../../images/ajax-loader.gif") no-repeat scroll center center;
}

Make A Modal

Using the editor tool in the Captavi Platform makes the modal creation process easy. Select text in the same manner as creating a link. Select the Open in Modal radio button. That is it! Your content contributor has made their own modal link. They can add the url of an image to create a modal link directly to an image file. More complex content layouts will need to be created on their own page first.

The title displayed at the top of the modal window is customizable to each link. Any text that is placed within the title box on the link creation/editing tool.

 <a href="http://42.qixsite.com/demo/layouts/2-col" rel="modal" title="Title to show up as the title of the modal">Linked Text or Image</a>

Targeting a specific portion of a page

Targeting specific portions of pages can be done by adding the ID of the element into the name box of the editor. This can be used to target an element on the same page or a new page.

<a name="lipsum" href="http://42.qixsite.com/demo/layouts/2-col" rel="modal">Linked Text or Image</a>

Demo

Click here for an image, here for text to see the modal in action!

 

   Email Print
Default template/content not set, contact Site builder, $custompagetemplateid: 1 PathToCurrentPage: /demo/examples/modals/ $FileName: index.php