Modal

Use this component to add dialogues to your website, whether it's for lightboxes, user notifications, or entirely custom content presentation.

content

Demo

Basic content modal

<div id="modal-box" class="modal-box-container">
  <div class="modal-box-wrapper modal-sm">
   <div class="modal-box-top">
     <span class="close-modal">×</span>  
     <h3 class="title">Modal title</h3>
   </div>  
   <div class="info">
     <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
   </div>
   <div class="btnWrapper">
     <button type="button" class="btn btn-secondary">Button</button>
     <button type="button" class="btn btn-primary">Button</button>
   </div>  
  </div>
</div>

Optional sizes

Modals have two optional sizes. Using .modal-lg to change modal to switch the modal to a larger size.

<!-- Large modal -->
<button id="open-modal" type="button" class="btn-primary">Open large modal</button>

<div id="modal-box" class="modal-box-container">
  <div class="modal-box-wrapper modal-lg">
    <div class="modal-box-top"> <span class="close-modal">×</span>
      <h3 class="title">Modal title</h3>
    </div>
    <div class="info">
      <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
    </div>
    <div class="btnWrapper">
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-primary">Button</button>
    </div>
  </div>
</div>

<!-- small modal -->
<button id="open-modal" type="button" class="btn-primary">Open large modal</button>

<div id="modal-box" class="modal-box-container">
  <div class="modal-box-wrapper modal-sm">
    <div class="modal-box-top"> <span class="close-modal">×</span>
      <h3 class="title">Modal title</h3>
    </div>
    <div class="info">
      <p>Lorem ipsum dolor sit amet, perpetua forensibus ut sit. In nulla labores qualisque duo, an sea vidit aliquam. Atqui complectitur his ea. Veri singulis honestatis est te. Nostrum voluptaria vis no.</p>
    </div>
    <div class="btnWrapper">
      <button type="button" class="btn btn-secondary">Button</button>
      <button type="button" class="btn btn-primary">Button</button>
    </div>
  </div>
</div>

Basic Usage

Please avoid duplicating the reference to the same CSS and JS files.

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.

<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/style.css">
<link rel="stylesheet" type="text/css" href="https://advcloudfiles.advantech.com/design/web-design-guides/component/css/modal.css">

JavaScript Instantiation

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them.

<script src="https://advcloudfiles.advantech.com/design/web-design-guides/component/js/Modal/setupModal.js"></script>

Call the `setupModal ` function with two arguments: the ID of the modal (modalId) and the ID of the button that triggers its opening (openBtnId).

// Initialize the First Modal popup window.
  setupModal("modal-box", "open-modal");

// Initialize the Second Modal popup window.
 setupModal("modal-box1", "open-modal1");

content