CSS 另一个div内的Bootstrap模式窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21555585/
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
Bootstrap modal window inside another div
提问by manearaluca
My bootstrap modal is working fine. My problem is that I need the modal window (including the gray background) to be applied on a div from the website and not on the body. I have the following structure:
我的引导模式工作正常。我的问题是我需要将模态窗口（包括灰色背景）应用于网站的 div 而不是正文。我有以下结构：
<div class="bigform-content">
<div class="wpcol-one col-md-6">
</div>
<div class="wpcol-one col-md-6">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>You didn't move the map pin, are you sure it is on your address/house?</p>
</div>
<div class="modal-footer">
<span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
<span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Now the modal window is opening correctly but I need to see it on the first div, and the other div to be click able when the modal window is open.
现在模态窗口正确打开，但我需要在第一个 div 上看到它，并且在模态窗口打开时可以单击另一个 div。
Can you please give me a solution for that? Thank you so much, Raluca.
你能给我一个解决方案吗？非常感谢你，拉卢卡。
回答by wilsotobianco
Here's an example I just did using your code and doing little tweaks to it.
这是我刚刚使用您的代码并对其进行了一些微调的示例。
Click here and watch it working
How to solve it:
如何解决：
$(function () {
//getting click event to show modal
$('#submit-button').click(function () {
$('#dialog_confirm_map').modal();
//appending modal background inside the bigform-content
$('.modal-backdrop').appendTo('.bigform-content');
//removing body classes to enable click events
$('body').removeClass();
});
//just to prove actions outside modal
$('#help-button').click(function () {
alert("Action with modal opened or closed");
});
//end just to prove actions outside modal
});.bigform-content {
border: solid 5px #DDD;
margin: 30px 20px;
overflow: hidden;
padding:20px;
position:relative;
}
.modal, .modal-backdrop {
position: absolute !important;
}
.bigform-content h1 {
margin:0;
}
.bigform-content input[type=submit] {
margin-top:10px;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="bigform-content">
<div class="wpcol-one col-md-6">
<h1>Hi, this is my form title</h1>
</div>
<div class="wpcol-one col-md-6">
<p>This is my form</p>
<label for="field-one">Field 1:</label>
<input id="field-one" class="form-control" type="text" />
<label for="field-two">Field 2:</label>
<input id="field-two" class="form-control" type="text" />
<label for="field-three">Field 1:</label>
<input id="field-three" class="form-control" type="text" />
<input id="submit-button" type="submit" value="Submit my form" class="btn btn-default" />
</div>
<!-- Modal -->
<div class="modal fade" id="dialog_confirm_map" tabindex="-1" role="dialog" aria-labelledby="dialog_confirm_mapLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>You didn't move the map pin, are you sure it is on your address/house?</p>
</div>
<div class="modal-footer"> <span style="float:left"><button type="button" class="btn btn-default" data-dismiss="modal">No, I'll do it now </button></span>
<span style="float:right"><button type="button" class="btn btn-primary" data-dismiss="modal" onClick="jQuery('#mapchanged').val(1);jQuery('#registration').submit();">Yes, I am sure</button></span>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
<p>Content outside div and modal</p>
<p>Hope it
<input id="help-button" type="button" value="helps" class="btn btn-success" />
</p>回答by AlexG
Thanks for the answer from wilsotobianco. For future reference I'm posting my solution as well. This works for all modals if you require multiple ones, without writing additional JS for every single modal.
感谢wilsotobianco的回答。为了将来参考，我也发布了我的解决方案。如果您需要多个模态，这适用于所有模态，而无需为每个模态编写额外的 JS。
Set them up like you would normally in bootstrap. The trigger simply requires the class .js-modal-rel-triggerand needs removal of the attribute data-toggle="modal"since we're toggling it with JS.
像通常在引导程序中一样设置它们。触发器只需要类.js-modal-rel-trigger并需要删除属性，data-toggle="modal"因为我们用 JS 切换它。
And the modal requires a custom class, in my case .modal-relto give it a smaller z-indexand position: absolute;.
模态需要一个自定义类，在我的情况下.modal-rel给它一个更小的z-index和position: absolute;.
The backdrop also gets the class .modal-rel-backdropassigned for the same reason.
由于.modal-rel-backdrop同样的原因，背景也获得了分配的班级。
$('.js-modal-rel-trigger').click(function() {
var modalId = $(this).attr('data-target');
$(modalId).modal();
$('.modal-backdrop').addClass('modal-rel-backdrop').appendTo($(modalId).parent());
$('body').removeClass('modal-open');
});body {
background: #F3F5F6 !important;
}
.container {
top: 50px;
background: #fff;
margin: 0 auto;
width: 80%;
padding: 20px;
position: relative;
}
.modal.modal-rel {
position: absolute;
z-index: 51;
}
.modal-backdrop.modal-rel-backdrop {
position: absolute;
z-index: 50;
// Fade for backdrop
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
<br> tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
<br>no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#myModal">
Abs. Modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg js-modal-rel-trigger" data-target="#mySecondModal">
Second abs. modal
</button>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myNormalModal" data-toggle="modal">
Default Modal
</button>
<!-- Modal -->
<div class="modal modal-rel fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Hi, I am positioned absolute!
</div>
</div>
</div>
</div>
<div class="modal modal-rel fade" id="mySecondModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Second title</h4>
</div>
<div class="modal-body">
Hi, I also am positioned absolute!
</div>
</div>
</div>
</div>
<div class="modal fade" id="myNormalModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">×</span></button>
<h4 class="modal-title" id="myModalLabel">Normal Modal</h4>
</div>
<div class="modal-body">
h0i. I have fixed positioning!
</div>
</div>
</div>
</div>
</div>