Currently, I am in the process of developing an application that can showcase multiple Bootstrap modals. At the moment, I have successfully implemented one modal for signing out, but unfortunately, the modal designed for displaying notifications is not functioning as intended.
The Bootstrap modal for signing out (works):
<div class="modal" id="NotificationModal" tabindex="-1" style="display:block;" role="dialog">
<div class="modal-dialog">
<div class="modal-content text-center">
<div class="modal-body" style="background-color: rgba(64,0,64,0.95);">
<h4 style="color: white;">Are you sure you want to sign out?</h4>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-modal" @onclick="@CloseNotificationModal">Yes, sign me out!</button>
<button type="button" id="SignOutModalClose" class="btn btn-modal" data-dismiss="modal" @onclick="@CloseNotificationModal">No, keep me signed in!</button>
</div>
</div>
</div>
</div>
The bootstrap modal for showing notifications(designed to be full height on the right side) (does not work):
<!-- Modal -->
<div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel2">Right Sidebar</h4>
</div>
<div class="modal-body">
<p>Text</p>
</div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
In my quest to resolve this issue, I referred to a tutorial at: https://codepen.io/bootpen/pen/jbbaRa. I incorporated the HTML code into my container (similar to the placement of the other Bootstrap modal) and included the corresponding CSS in my bootstrap.min.css file.
If anyone could offer assistance, it would be greatly appreciated. I've been troubleshooting this problem for the past two days without success.
Sincerely, Niels