Modal

The modal component allows the user to display content in a modal window when the user clicks on a modal trigger element.

Modal examples

This will trigger the modalAnother modal

This is the modal header

 
This is the modal content.

This is the modal header

 
Buildr

  Code example

<div data-id="mymodal" class="zen-modal">
    <div class="zen-modal-header">
        <h3>This is the modal header</h3>
        <div class="zen-modal-close"><span class="zen-icon zen-icon-times"></span></div>
    </div>
    <div class="zen-modal-content">
        <p>This is the modal content.</p>
    </div>
</div>
<div class="zen-modal-overlay"></div>

Please note that the zen-modal-overlay markup is only required once on your page so if your template includes this already (eg All Zen Grid Framework v4 themes) then you are not required to add this div.

How is this used in the Build.r template?

The modal functionality is built into the Build.r template when using the panel position.

To trigger the hidden panel you need to ensure that the panel-trigger is used in the layout area and you have a module published to the panel position. The markup used below is designed for cases where you want to add it manually to your content.

Hidden Panel Documentation

Less Variables

  • @modal-max-width: 600px;
  • @modal-max-height: 400px;
  • @modal-bg: #fff;
  • @modal-color: #000;
  • @modal-overlay-bg: #333;
  • @modal-overlay-fade: 80%;