Modal

A modal is a container in which you can put any kind of content, from text to forms to video to an entire grid. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead.

There are four size in Modal Small, Default, Large and Extra Large. Use these classes for different sizes: modalSmall, modalLarge, modalExtraLarge.

By default whole Modal is scrollable, if scroll is required on Content only, use this class modalDialogScrollable.

How to import modal styles:

In order to use modals in your project, import following path in your main styles:

@import 'node_modules/@mobilelivenpm/fds-static-scss/src/scss/modal
How to customize modal styles:

In order to customize modals in your theme as per requirements, import following path in your theme-settings file:

@import 'node_modules/@mobilelivenpm/fds-static-scss/theme/modal

Modals Popup Size

Default: Left-align

Title + Message
Icon + Title + Message
Title + Paragraph
Close button variations

Basic Modal (Header / Body - Content / Footer)

Center-align

  <!--Modal Popup-->

  
  <div id="modalBackdrop" class="modalBackdrop"></div>
  <div id="modal1" class="modal" tabindex="-1">
    <div class="modalDialog">
      <div class="modalContent">
        <div class="modalHeader">
          <button tabindex="1" type="button" class="icnClose icon-close" onclick="hideModal();"></button>
        </div>
        <div class="modalBody"></div>
        <div class="modalFooter"></div>
      </div>
    </div>
  </div>
  

  <!--Modal Popup Small-->

  
  <div classmodalDialog modalSmall"></div>
  

  <!--Modal Popup Large-->

  
  <div classmodalDialog modalLarge"></div>
  

  <!--Modal Popup Extra Large-->

  
  <div classmodalDialog modalExtraLarge"></div>
  

  <!--Modal Popup Content Scrollable-->

  
  <div classmodalDialog modalDialogScrollable"></div>