Skip to main content

Modal

Introduction​

This module allows an easy and fast creation of accessible modal window. This modal can be of any purpose. User decides the content of the entire modal!

Usage​

"Modal" module is available in the list of modules. We can add it anytime. This is a composite module, which means it comes with demo static content and some styling. More specifically, it consists of a button that opens the modal and Modal module next to it.

Content / template​

Modal module accepts Template module as a direct children. The main purpose of Template is to serve as a container for any other modules which must be shown in the modal window. What we do is just add other modules, like heading, paragraph, divs etc. Again, it can be anything. Whatever we want!

Styling​

Modal includes one CSS variables for quick styling of the "backdrop" (a semi-transparent full page overlay):

--bldr-modal-backdrop-color: rgba(0, 0, 0, 0.2);

This CSS variable is added in "CSS Variables" setting (under "CSS Settings" tab) of Modal module.

Other parts of Modal module, including its internal automatically generated HTML can be styled by using custom CSS selectors.

For developers / API​

info
  • HTML tag name: <builderius-modal>
  • Implements 3rd-party script: none
  • Allowed children modules: Template
  • Available since: 0.9.7 PRO

Example of HTML generated when modal is opened​

<builderius-modal class="uni-node-u9eff753db" data-open-selector=".open-modal-1" data-close-selector=".close-modal-1">
   <div id="fa71574" class="builderiusModal" role="dialog" aria-labelledby="dialog-fa71574__label" aria-describedby="dialog-fa71574__screenreader" aria-controledby="dialog-fa71574__label" aria-modal="true" tabindex="0">
        <p style="position: fixed; top: -99999px;" id="dialog-fa71574__screenreader">You are in a modal. Esc key will close the modal.</p>
        <div class="uni-node-u3343d8ec7">
         <h2 id="dialog-1__label" class="uni-node-u8befb8796">Modal heading</h2>
         <p class="uni-node-ud22611258">Modal content here</p>
         <button class="uni-node-u8693601a5 close-modal-1" type="button" aria-controls="dialog-1"><svg class="uni-node-u4835025ad" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256"><path d="M208 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16Zm-26.34 138.34a8 8 0 0 1-11.32 11.32L128 139.31l-42.34 42.35a8 8 0 0 1-11.32-11.32L116.69 128 74.34 85.66a8 8 0 0 1 11.32-11.32L128 116.69l42.34-42.35a8 8 0 0 1 11.32 11.32L139.31 128Z"></path></svg>
            <span class="uni-node-uc7910d8bd">Close Modal</span>
         </button>
        </div>
   </div>
   <div class="builderiusModalBackdrop modalShow"></div>
</builderius-modal>

Any html added to Template will be copied and rendered inside a div with class builderiusModal. This DIV will be created automatically! The next DIV with class builderiusModalBackdrop also will be generated automatically. This is a so-called "backdrop" - a semitransparent overlay. It has an additional class modalShow when the modal is opened.

When the modal is closed, then both DIVs mentioned above (those which classes builderiusModal and builderiusModalBackdrop) will be removed completely from DOM.

API docs​

Similar to other interactive modules, Modal module uses HTML attributes, which take part of the module's API. An example: HTML attribute data-content which holds the value of "Content" setting.

Read more the full list of attributes, events and methods below:

Attributes​

data-open-selector​

This attribute expects a string with a CSS selector. This should be a selector for an element or elements which trigger opening the modal window.

data-close-selector​

This attribute expects a string with a CSS selector. This should be a selector for an element or elements inside the modal which trigger closing the modal window.

Events​

ready (scope: element)​

builderius-modal-ready (scope: window)​

This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:

{ el }

Where el is the reference to the HTML element.

opened (scope: element)​

builderius-modal-opened (scope: window)​

This event is getting fired every time the modal is getting opened. It also passes some data:

{ el }

Where el is the reference to the HTML element.

closed (scope: element)​

builderius-modal-closed (scope: window)​

This event is getting fired every time the modal is getting closed. It also passes some data:

{ el }

Where el is the reference to the HTML element.

Methods​

reInit​

This method resets and initiates the component.

open​

This method opens the modal window programmatically.

close​

This method closes the modal window programmatically.

Demo​

Demo page