The blackout is a special kind of component in which a single instance should only exist. The implementation behind this is for situations where multiple components need to open a blackout at the same time (multiple modals, etc), but not display multiple overlapping blackout elements. A single blackout instance solves this problem by recording a count of how many times it has been opened, and decreases that count each time it is closed. The blackout element is shown on the 1st count, and hidden once the count reaches 0.

The blackout instance can be retrieved using the instance() method.

var blackout = Toolkit.Blackout.instance();;
For the most part, the blackout should rarely be interacted with manually. Components that integrate the blackout will handle situations accordingly.


Variable Default Description
$blackout-class .blackout CSS class name for the blackout element.
$blackout-opacity 0.85 The alpha transparency for the blackout element.
$blackout-transition .3s The transition time for fading in and out.
$blackout-zindex 600 The z-index for the blackout element.


Since the blackout is a singleton, options will need to be set globally.

Option Type Default Description
loaderTemplate string <div class="loader bar-wave">
<div class="loader-message" data-loader-message></div>
The loader markup to be inserted into the blackout.
showLoading bool true If true, will insert Toolkit.messages.loading into the [data-loader-message] element.
template string <div class="blackout"></div> The blackout markup.
templateFrom string #toolkit-blackout-1 The ID of an element to use as the template.


Inherits all events from the parent Component.

Event Arguments Description
hiding Triggered before the blackout is hidden.
hidden bool:hidden Triggered after the blackout is hidden (may not actually conceal it). The hidden argument determines when the blackout is visually hidden, instead of simply decreasing its display count.
showing Triggered before the blackout is shown.
shown bool:shown Triggered after the blackout is shown (may not actually reveal it). The shown argument determines when the blackout is visually shown, instead of simply increasing its display count.


Inherits all properties from the parent Component.

Property Type Description Found With
count int A count of many times the blackout has been opened by components. Determines whether to show or hide the element.
loader element The loading animation element.
message element The loading message element located within the loader element. [data-loader-message]


Inherits all methods from the parent Component.

Method Description
hideLoader() Hide the loader element.
showLoader() Show the loader element.