如何使模式背景可點擊？

Question

我想創建一個可以插入網站的聊天框。 我一直在使用Bootstrap Modal來實現這一目標。

我希望我的模態在用戶單擊模態之外時不關閉。 但是網站背景仍然應該是可點擊/可選擇的，以便用戶仍然可以在網站上執行操作。

這是我到目前為止編寫的代碼。

 $(window).load(function () { $('#myModal').modal({ backdrop: 'static', keyboard: false}); $('#myModal').modal('show'); }); function myFunction() { $('#myModal').modal('toggle'); window.alert('Hello'); } 

 .vertical-alignment-helper { display:table; height: 100%; width: 100%; pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */ } .vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; pointer-events:none; } .modal-content { /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */ width:inherit; height:inherit; /* To center horizontally */ margin: 0 auto; pointer-events: all; float: left; max-width: 250px; background-color: #ffffff; } .textarea-nonresizable { height: 10em; border-radius: 1em; outline: none; /* removes the default outline */ resize: none; /* prevents the user-resizing, adjust to taste */ } .header-cl { background-color: #262626; color: #FFFFFF; border-bottom-width: 0px; } .header-f { font-size: 14px; font-weight: bold; } .body-cl { background-color: #c7c8c9; } .foot-cl { border-top-width: 0px; padding-top: 0px; background-color: #c7c8c9; color: #FFFFFF; } .btn-ft { background-color: #3f1603; color: #FFFFFF; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary { color: #FFFFFF; background-color: #3f1603; } 

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="modal fade " id="myModal" role="dialog"> <div class="vertical-alignment-helper"> <div class="modal-dialog vertical-align-center modal-sm"> <div class="modal-content"> <div class="modal-header header-cl"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span class="glyphicon glyphicon-minus-sign"></span> </button> <h4 class="modal-title header-f">Contact Us</h4> </div> <div class="modal-body body-cl"> <textarea class="form-control textarea-nonresizable" id="comment" placeholder="Type your message here"></textarea> </div> <div class="modal-footer foot-cl"> <div style="float:left;color:#FFFFFF;font-size: 11px;line-height: 34px;"> Powered by <strong>Stackoverflow</strong> </div> <button type="button" class="btn btn-primary btn-ft" onclick="myFunction()">Start Text</button> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> 

Answer 1

您可以使用pointer-events: none; 關於.modal和.modal-backdrop 。 或使用display: none;隱藏.modal-backdrop display: none;

.modal {
    pointer-events: none;
}
.modal-backdrop {
    display: none;
}

例

老實說，如果您要對引導程序模版的功能進行如此多的修改，那么不妨嘗試使用具有固定位置的自定義元素，而不要嘗試與Bootstrap CSS對抗。