Modal Windows - Mura Docs v6

Modal Windows

Mura CMS has several useful development tools baked-in. This exercise will demonstrate how to leverage some of those utility functions to create modal windows.

Sometimes you may have a need to display content or other objects within a modal window. The following methods are simple examples of how you can quickly and easily create modal windows with Mura CMS.

Bootstrap

The MuraBootstrap theme includes its own method of creating modal windows. The footer.cfm file includes the following code:

#$.dspThemeInclude('display_objects/sampleModalWindow.cfm')#

It simply includes the file located at /{SiteID}/includes/themes/MuraBootstrap/display_objects/sampleModalWindow.cfm.

Open the file and review it. This simply uses Bootstrap-specific markup to create a modal window. However, for Bootstrap to recognize this window and when to launch it, you need to provide a link with the href attribute pointing to the ID attribute of the modal window container and a data-toggle attribute set to modal. For example, the following line of code can be found in the footer.cfm file:

<a href="##myModal" data-toggle="modal">Sample Modal Window</a>

Shadowbox.js

Shadowbox.js (http://www.shadowbox-js.com), a web-based media viewer application, is also automatically included with Mura. In the exercise, we'll use it to display content in a hidden <div> that's been added to the footer.cfm file.

  1. Add the built-in Mura method to the file.
    1. Edit your footer.cfm file and add the following method at the top. This will check to see if the JavaScript for Shadowbox.js has been loaded. If it has, it won't add it again. But if it doesn't yet exist, it will load it for you.

      <cfset $.loadShadowBoxJS()>
  2. Add the necessary markup.
    1. Next you need to tell Shadowbox which links you want it to open. The simplest way to do this is through your HTML markup. If you're going to take this route, at the very least, you must add a rel="shadowbox" attribute to each link. For example, say you have a link to an image on your page:

      <a href="myimage.jpg">My Image</a>

      In order to set up this link for use with Shadowbox, simply change it to this:

      <a href="myimage.jpg" rel="shadowbox">My Image<a>

      Then, clicking on this link should now open up the image in Shadowbox.

    2. Add the following code to footer.cfm:

      <div id="inline-content" style="display:none;">
      <h3>Shadowbox.js</h3>
      <p>Suspendisse eget mauris ut risus sodales sagittis. Nunc vel nibh ante. Vivamus vel eros venenatis nibh varius feugiat. Ut elementum consequat iaculis. Phasellus quis justo odio. Donec commodo, est sit amet venenatis sodales, libero enim venenatis arcu, id ultrices lorem nulla quis enim. Etiam aliquam metus et purus faucibus sed mattis leo vulputate.</p>
      </div>
    3. Add the following code as the last list item of the unordered list inside the <footer> element. The double pound signs (##) are used to escape CFML rendering.

      <li><span class="divider">|</span> <a rel="shadowbox;" href="##inline-content">Shadowbox Modal Window</a></li>
    4. View your content.

    5. By default, Shadowbox nearly fills the entire viewport. You can control several properties of a Shadowbox content object. A couple of those properties include width and height. Edit the list item we added earlier to include these properties:

      <li><span class="divider">|</span> <a href="##inline-content">Shadowbox Modal Window</a></li>
    6. Then view your content again: