src/sass/components/_variables.scss
and adds additonal options in
src/sass/components/_modal.scss
.Modal body text goes here.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_1">
Launch demo modal
</button>
<div class="modal fade" tabindex="-1" id="kt_modal_1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
.modal-fullscreen
class to enable a modal with fullscreen mode. Add
.bg-white
and
.shadow-none
classes to fix background color and unwanted shadow issue when modal has a long scrollable content.Modal body text goes here.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_2">
Launch demo modal
</button>
<div class="modal bg-white fade" tabindex="-1" id="kt_modal_2">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content shadow-none">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>