启用后台打开时的引导模式弹出

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