WebUI mobile-first CSS

Modal Classes

The following tables describe the classes available in WebUI for modals.

Modal Classes

Class

Description

modal

Defines the modal container and backdrop.

modal-animate

Provides a quick way to animate the modal with a fade in effect.

modal-scroll-body

A container to wrap modal content and allow vertical scrolling without a scrollbar.

modal-close

Specifies that the control will close the modal when activated.

Sizing Classes

Class

Description

model-sm

Specifies a small sized modal.

modal-md

Specifies a medium sized modal.

modal-lg

Specifies a large sized modal.

modal-auto-stretch

Causes the modal to expand with the browser viewport height when at the smaller breakpoint widths.

Positioning Classes

Class

Description

modal-top-left

Positions the modal at the top left of the viewport.

modal-top-center

Positions the modal at the top center of the viewport.

modal-top-right

Positions the modal at the top right of the viewport.

modal-middle-left

Positions the modal at the middle left of the viewport.

modal-middle-right

Positions the modal at the middle right of the viewport.

modal-bottom-left

Positions the modal at the bottom left of the viewport.

modal-bottom-center

Positions the modal at the bottom center of the viewport.

modal-bottom-right

Positions the modal at the bottom right of the viewport.

Modals

WebUI allows you to easily create responsive model dialogs in 3 different sizes: small, medium, and large. Modal dialogs can be positioned in one of 9 different screen locations, these are: top left, top center, top right, middle left, middle center (default), middle right, bottom left, bottom center, and bottom right.

These modals are responsive out of the box, so the width and height will adjust according to the available screen area - this is so that a modal can never go off screen. As far as the modal content goes there is no special layout, so you can design your modal how you want it. However, it's always best to design your layout to suit the initial modal sizes. But if you need more height and you don't mind a vertical scrollbar, then you can add as much as you wish.

Global Initialisation

Setting

Description

closeFromBackdrop

Whether to allow the modal to be dismissed by clicking outside the modal.
Can be true or false. Default: false.

transitionDuration

The time taken in milliseconds for the modal to fade in and out.
An integer value. Default: 300.

Functions

Function

Description

showModal()

Shows a modal

hideModal()

Hides a modal.

Modals can be closed by using the Esc key.

Example

Markup

<div class="form-row text-bold text-sm">
  <div class="form-col-20 background-accent-1-light gap-horizontal-md">
    <button type="button" class="button-sm button-accent-1" id="showModal">Show Modal</button>
    <button type="button" class="button-sm button-accent-1" id="hideModal">Hide Modal</button>
  </div>
</div>

<div id="modal1" class="modal">
  <div class="modal-md modal-top-center modal-auto-stretch accent-1-light">
    <div class="place-top-right layer-top">
      <a href="javascript:void(0)" class="container modal-close height-xs-sm width-xs-sm accent-1 color-hover-accent-4 rounded-full raised-md fixed" id="modalClose1">
        <i class="fa fa-close place-middle-center"></i>
      </a>
    </div>
    <div class="modal-scroll-body">
      <div class="form-row">
        <div class="form-col-20 pad-left-md pad-top-md">
          <span class="text-xl text-bold">Modal window example</span>
        </div>
      </div>
      <div class="form-row">
        <div class="form-col-20">
          <div class="body">
            <div class="content-col-20">
              <div class="panel border-sm border-muted">
                <div class="content-row">
                  <div class="content-col-20">
                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
                      quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
                      ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
                      erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
                      eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
                      Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam
                      erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
                      quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
                      ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
                      erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum,
                      eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
                      Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam
                      erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>    
      <div class="form-row">
        <div class="form-col-20 gap-horizontal-xs text-sm text-right pad-right-md">
          <button type="button" class="button-sm button-success rounded-md">OK</button>
          <button type="button" class="button-sm button-accent-4 rounded-md modal-close">Cancel</button>
        </div>
      </div>
      <div class="row-spacing-sm"></div>
    </div>
  </div>
</div>

Script

webui.ready(function() {

  var modal1 = ui("#modal1").modalControl({
    closeFromBackdrop: true,
    transitionDuration: 500
  });

  ui("#showModal").click( function() { 
    modal1.open();
    ui("#modalClose1").css("margin-top", "-0.75rem").css("margin-left", "-1.25rem");
  });

});

Modal Functions

It is important that the functions open and close are used if you want to open and close modal dialogs programatically as some background tasks need to be completed, such as disabling and re-enabling scrolling for the underlying page. However, within the modal you only need to add the class modal-close on controls that will close the modal.

Events

There are 4 event callbacks that can be used, ui.modal.show.before, ui.modal.show.after, ui.modal.hide.before, and ui.modal.hide.after. The following script shows how to setup the event callbacks.

Script

webui.ready(function() {
    
  modal1.on("ui.modal.show.before", function(e) {
    // Take some action
  });

  modal1.on("ui.modal.show.after", function(e) {
    // Take some action
  });

  modal1.on("ui.modal.hide.before", function(e) {
    // Take some action
  });

  modal1.on("ui.modal.hide.after", function(e) {
    // Take some action
  });
                
});