Popping up the modal onclick always increases the intractivity
of a webage. So, Bermuda gives the modal component which can
used very easily.
In order to make use of this intractive modal you need to
use the script tag of Bermuda.
Modal in Bermuda
Simple Modal
This is a simple modal ehich can be customized for multiple usecases.
<!-- Background Overlay -->
<div class="overlay modal__action hide"></div>
<!-- Button to Open Modal -->
<button class="btn btn-default border-rounded-sm transition open-simple-modal">
Open Simple modal
</button>
<!-- Modal -->
<div class="modal simple-modal shadow-lg border-rounded-sm hide">
<div class="modal__header">
<h3>This is a modal header</h3>
</div>
<div class="modal__body">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Laboriosam, amet quidem ab dolorem illum ipsam incidunt modi
natus nihil tenetur. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Ea est laboriosam sit qui
</div>
<div class="modal__footer">
<button class="btn btn-primary-outline modal__action">
Action 1
</button>
<button
class="btn btn-primary modal__action"
>
Action 2
</button>
</div>
</div>
You can change the content inside the modal, otherwise layout will remain same.