CSS 打开 Bootstrap 模态弹出窗口时启用背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35388375/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enable background when open Bootstrap modal popup
提问by user3248761
I have used modal popup of Bootstrap in my project and want following things:
我在我的项目中使用了 Bootstrap 的模态弹出窗口，并且想要以下内容：
- When open modal popup and click on the background popup should not close.
- When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
- After open modal popup user can also work on the background that time popup should not close.
- 当打开模态弹出窗口并单击背景弹出窗口时不应关闭。
- 打开模态弹出背景时不应模糊，这意味着打开模态弹出背景不应有任何影响。
- 打开模态弹出窗口后，用户还可以在不应关闭时间弹出窗口的背景上工作。
回答by Shehary
1) When open model popup and click on the background popup should not close.
1）当打开模型弹出窗口并单击背景弹出窗口时，不应关闭。
Include data attributes data-keyboard="false" data-backdrop="static"in the modal definition itself:
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) When open model popup background should not blur. meaning opening model popup background should not affect any way.
2）当打开模型弹出背景不应模糊。这意味着打开模型弹出背景不应该有任何影响。
Set .modal-backdropproperty value to display:none;
将.modal-backdrop属性值设置为display:none;
.modal-backdrop {
display:none;
}
3) After open model popup user can also work on the background that time popup should not close.
3) 打开模型弹窗后，用户还可以在不应该关闭时间弹窗的后台工作。
Add values in .modal-open .modal
添加值 .modal-open .modal
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
SideNote: you may need to adjust the width of modal according to screen size with media queries.
旁注：您可能需要使用媒体查询根据屏幕大小调整模态的宽度。
Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use custom selectors.
免责声明：此答案仅用于演示如何实现所有 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">×</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>回答by Palash
backdrop="false" will remove background black screen only but it will not allow you to do anything on background element. To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate. and need to use some custom css style. Add a custom class with modal
background="false" 将仅删除背景黑屏，但不允许您对背景元素执行任何操作。为了保持背景交互并在全视图中保持模态处于中间位置，您需要在模态生成后使用 js 代码删除“模态”类。并且需要使用一些自定义的 css 样式。添加带有模态的自定义类
<div class="modal fade custom-modal" id="myModal" role="dialog">
<div class ="modal-dialog" role="document">
<div class ="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header moveable-modal-header"></div>
</div>
</div>
</div>
</div>
//cs styles//
.custom-modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
}
.modal-dialog{margin: 0;}
now after populate modal need to remove 'modal' class from myModal div
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}
现在填充模态后需要从 myModal div 中删除“模态”类
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}
