SI Design System

Modal Dialogs

We use modals and dialogs for a variety of different purposes throughout the app including forms and verification prompts. When a modal dialog opens the background is covered by a black overlay with 90% opacity so the user can focus on dialog message.



</> Code

<button class="bttnWebAction" onclick="openModal('testDialog')"><h4>Open primary modal</h4></button>

<div id="testDialog" class="modal fade">....</div>



Ιn cases where a large volume of data is expected, trere is an option for large modal. For example when a modal contains tables or user logs.



</> Code

<button class="bttnWebAction" onclick="openModal('largeDialog')"><h4>Open primary modal</h4></button>

<div id="largeDialog" class="modal modalWrapperBig fade">....</div>



Modal dialogs differ in width, whereas height is determined by the content. Once it reaches a certain threshold, the body content will scroll while the header and footer remain fixed until the bottom of the modal dialog is reached.



</> Code

<button class="bttnWebAction" onclick="openModal('scrollDialog')"><h4>Open primary modal</h4></button>

<div id="scrollDialog" class="modal modalWrapperBig fade">....</div>



In some cases a modal dialog displays content that requires user interaction, in a layer above the page. Any of the Security Infusion buttons can be used inside a modal.



</> Code

<button class="bttnWebAction" onclick="openModal('actionDialog')"><h4>Open primary modal</h4></button>

<div id="actionDialog" class="modal modalWrapperBig fade">
....
 <div class="modalButtons">
    <button class="bttnWebAction"><h4>Primary Action</h4></button>
    <button class="bttnBlackCancel"><h4>Cancel</h4></button>
 </div>
</div>



Dont's


Do not use modal dialogs as status notifications

Never place a modal anchor inside another modal


previous

next