Payroc Design logo
  • Our brand
    Mission statement Personality Values Assets
  • Content guidelines
    Voice and tone Grammar and formatting Inclusive language Writing style guides
  • Design system
    Get started Essentials Components Patterns
Submit a design request
  1. Payroc design
  2. Design system
  3. Components
  4. Modal

Modal

This JavaScript modal adds dialogs to your site for lightboxes, notifications, or completely custom content.

Anatomy

Diagram of a modal component.
  1. Title
  2. Close
  3. Sub Heading
  4. Body

Example

Coded example

James Oberman

Chief Executive Officer

Jim has been with Payroc since 2015. Since 2000 Jim has served in a number of executive capacities including National Processing Company (NPC-formerly Retriever Payment Systems). In 2010 Vantiv (VNTV: NYSE) purchased NPC and Vantiv appointed Jim as the Managing Director of Vantiv’s NPC ISO business. Late in 2013 Vantiv appointed Jim to serve as Vantiv’s enterprise-wide Chief Merchant Risk Officer. NPC is Vantiv’s nationwide ISO merchant distribution business serving over 220,000 small-to-medium-sized merchants.

During Jim’s tenure with NPC and Vantiv, he also drove the development of and relationship with several key NPC ISOs, as well as oversight and management of specific specialty initiatives. These initiatives include the invention of market differentiating boarding, CRM and risk management systems, the acquisition of merchant portfolios, the oversight of the company’s POS equipment leasing and check processing divisions, and acquisition and oversight of NPC’s POS terminal deployment and service business unit. Jim has served on a number of payments association and card brand advisory committees and boards which included serving on the Electronic Transaction Association (ETA) Government Relations and Risk Committees and ETA’s Strategic Leadership Forum.

Jim currently resides in the Chicagoland area, has been married for 39 years, has 4 children and 8 grandchildren. For over 33 years Jim has been a board member of Calvary Academy Christian School in South Holland, Illinois, and Restoration Ministries in Harvey, Illinois, and serves on the Board of Elders of Parkview Christian Church in Orland Park, Illinois.

Code snippet

HTML JavaScript
									
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch the modal
</button>
<!-- Modal -->
<div class="modal fade pt-60" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true"><i class="fa-solid fa-xmark"></i><span class="keyboard-text">esc</span></span>
        </button>
      </div>
      <div class="modal-body modal-body-padded">
        <h3>Modal heading</h3>
        <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.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
          
								
									
  None required
          
								

Variants

The maximum width of a modal can be set by using the following classes on the .modal-dialog element.

  • .modal-width-4 - 448px
  • .modal-width-6 - 696px
  • .modal-width-8 - 944px
  • .modal-width-10 - 1192px

Figma prototype

Usage guide

Dos and don'ts

To focus a users attention on one task.

Include the close icon to give the user a simple way to dismiss the modal.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Double modals. Never put another modal inside a modal.

It might be better to keep the content on a page so the user does not get interupted.

Don't use a modal to display error or success messages.

Payroc Design logo

Copyright © Payroc

    Our brand
  • Mission statement
  • Personality
  • Values
  • Assets
  • Brand Guide for Sales Partners
    Content guidelines
  • Voice and tone
  • Grammar and formatting
  • Inclusive lanugage
  • Writing style guides
    Design system
  • Get started
  • Essentials
  • Components
  • Patterns