Skip to main content

Modal Component

Zuora

Modal Component

  1. Last updated
  2. Save as PDF

The Modal component provides a lightweight global modal UI component that includes the following features:

  • A JavaScript function that can be tied to a button or link to activate/open the modal window
  • Configurable modal width, in px or %, and minimal height with default values

You can close a modal window by one of the following:

  • Press ESC
  • Click the X icon on the right upper corner
  • Click anywhere on the window

The Modal component is available in the Versions 6.2 and later of Zuora Quotes.

The Modal component consists of the following:

  • Modal.component: The Visualforce component to be embedded in your Visualforce page

Modal Component Attributes

The Modal component accepts the following attributes.

Attribute
Type
Required?
Default 
Description
name String Required N/A

A unique ID of the modal window.
width String Optional 80%

Width for the modal instance.

Specify the desired width following the CSS standard for the width property, e.g. 800px or 75%.
minHeight String Optional 0

Minimal height of the modal instance.

Specify the min height following the CSS standard for the min-height property.

Modal CSS Classes

To allow easy scaffolding while building your Visualforce page, the Modal component provides a number of CSS classes that you can apply to <div> block elements inside the body of the Modal, e.g., <div class="modal-header">. See the examples in the next section for usage.

Class
Description
CSS Overview
modal-simple-content If your modal only embeds a very simple text or element, use this class to provide adequate padding.

padding: 20px;
modal-header Use this CSS class when providing a custom header for your modal.

background: #eee;

padding: 20px;

text-align: center;
modal-sidebar Use this CSS class when you want to provide a sidebar in your modal. This will float on the left inside of your modal.

width: 160px;

padding: 20px;

float: left;
modal-content Use this CSS class with the sidebar to push your content to the right, so it doesn't overlay with the sidebar.

margin-left: 200px

padding: 20px;

border-left: 1px solid #eee;
modal-buttons Use this CSS class to wrap your buttons action. This will be displayed on the bottom of the modal with a center alignment.

float: clear;

border-top: 1px solid #eee;

padding: 20px;

text-align: center;

Sample Codes

This section includes sample Visualforce page codes that shows different ways to use the Modal component.

Create a Simple Modal

<apex:page>
   <zqu:Modal name="myModal">
      <div class="modal-simple-content">
         <p>Hello, World!</p>
      </div>
   </zqu:Modal>
 
   <p>
      <!-- The method can be called from any link or button, it deactivates the default event -->
      <a href="#" onclick="myModal.open();">Open Modal</a>
   </p>
</apex:page>

Create a Complex Modal

This sample codes shows how to use the Modal CSS classes to build a more elaborate modal window. You add the CSS classes to the Visualforce page, and you do not need to modify the controller.

<apex:page>
   <zqu:Modal name="myModal">
      <div class="modal-header">
         <p>This is some header</p>
      </div>
      <div class="modal-sidebar">
         <ul>
            <li><a href="#">List</a></li>
            <li><a href="#">List</a></li>
            <li><a href="#">List</a></li>
            <li><a href="#">List</a></li>
         </ul>
      </div>
      <div class="modal-content">
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
         </p>
      </div>
      <div class="modal-buttons">
         <apex:form>
            <apex:commandButton value="Back" />
            <apex:commandButton value="Done" />
         </apex:form>
      </div>
   </zqu:Modal>
  
   <p>
      <!-- The method can be called from any link or button, it deactivates the default event -->
      <a href="#" onclick="myModal.open();">Open Modal</a>
   </p>
</apex:page>

Create Multiple Modals on One Page

You can have multiple Modal component instances on one Visualforce page. Each modal must have a unique name on the same page.

<apex:page>
   <zqu:Modal name="myFirstModal">
      <div class="modal-simple-content">
         <p>Hello, World!</p>
      </div>
   </zqu:Modal>
   <zqu:Modal name="mySecondModal">
      <div class="modal-simple-content">
         <p>Hello, second World!</p>
      </div>
   </zqu:Modal>
   <p>
      <a href="#" onclick="myFirstModal.open();">Open First Modal</a>
      <a href="#" onclick="mySecondModal.open();">Open Second Modal</a>
   </p>
</apex:page>