啓用後臺打開時的引導模式彈出

Question

我用在我的項目引導的模式彈出，並希望下面的事情：

1. 當開放模式彈出，點擊後臺彈出窗口應在不關閉。
2. 當打開模式彈出窗口背景不應該模糊。這意味着打開模式彈出窗口背景不應該有任何影響。
3. 打開模式彈出式用戶也可以在時間彈出窗口不應該關閉的背景上工作。

Answer 1

1）當打開模型彈出並點擊背景彈出不應該關閉。

包含在模式定義本身數據屬性data-keyboard="false" data-backdrop="static"：

<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static"> 
    // Modal HTML Markup 
</div> 

2）當開放模式彈出背景不應該模糊。這意味着開放模型彈出背景不應該有任何影響。

設置.modal-backdrop屬性值display:none;

.modal-backdrop { 
    display:none; 
} 

3）開放模式彈出的用戶後，還可以在後臺工作，那個時候彈出應該不會關閉。

在.modal-open .modal

.modal-open .modal { 
    width: 300px; 
    margin: 0 auto; 
} 

的SideNote添加值：您可能需要根據屏幕大小與媒體查詢調整模式的寬度。

聲明：此答案僅用於演示如何實現所有3個目標如果您有多於一個自舉模式，上述更改將影響所有模式，強烈建議使用自定義選擇器。

.modal-backdrop { 
 
    display: none !important; 
 
} 
 
.modal-open .modal { 
 
    width: 300px; 
 
    margin: 0 auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 
<br> This is a text and can be selected for copying 
 
<br> This is a text and can be selected for copying 
 
<br> This is a text and can be selected for copying 
 
<br> This is a text and can be selected for copying 
 
<br> 
 

 
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Working Fiddle Example