我的引导程序模式之一无法正常工作，我不知道为什么吗？

Question

因此，我正在创建一个可以显示多个引导程序模式的应用程序，目前，我有一个用于注销的模式和一个用于显示通知的模式（该模式不起作用。

用于注销的Bootstrap模态（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>

用于显示通知的引导程序模式（希望它在右侧为全高）（不起作用：

        <!-- 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">&times;</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 -->

[我遵循了本教程：https://codepen.io/bootpen/pen/jbbaRa，并将html代码添加到了我的容器中（与其他引导程序模态相同，并在我的bootstrap.min.css中添加了CSS）。

有人可以帮助我吗？我已经为此工作了2天，无法解决。

尼尔斯

Answer 1

我也遇到了同样的问题。请检查某些模态的未封闭div。

Answer 2

您将需要CSS代码才能工作。

.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 320px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}


.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.right .modal-body {
  padding: 15px 15px 80px;
}


/*Right*/

.modal.right.fade .modal-dialog {
  right: -320px;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}
/* change from fade.in to fade.show */   
.modal.right.fade.show .modal-dialog {
  right: 0;
}


/* ----- MODAL STYLE ----- */

.modal-content {
  border-radius: 0;
  border: none;
}

.modal-header {
  border-bottom-color: #EEEEEE;
  background-color: #FAFAFA;
}

.btn-demo {
  margin: 15px;
  padding: 10px 15px;
  border-radius: 0;
  font-size: 16px;
  background-color: #FFFFFF;
}

.btn-demo:focus {
  outline: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<button type="button" class="btn btn-demo" data-toggle="modal" data-target="#myModal2">
			Right Sidebar Modal
		</button>

<!-- 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">&times;</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 -->