我一直在尝试调整我的代码，以便模式弹出窗口将在一个大包装器中，但它并没有像我希望的那样发生。
页面加载时现在的样子 - 带有模糊叠加层的弹出窗口
<section id="wrapper">
<div class="logo">
<a href="<?php echo $base_url; ?>index.php">
<img src="assets/images/logo.png" class="img img-responsive"/>
</a>
</div>
<div class="fat-nav">
<div class="fat-nav__wrapper">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Help</a></li>
<?php if(isset($_SESSION['login']) && $_SESSION['login'] == true) : ?>
<li><a href="<?php echo $base_url;?>logout.php">Logout</a></li>
<?php endif; ?>
</ul>
</div>
</div>
<div class="content">
<div class="container master-container">
<div class="back-top-right"></div>
<div class="square-container"></div><!-- /.square-container -->
<div class="back-bottom-left"></div>
<div class="clearfix"></div>
</div><!-- /.col-sm-12 -->
</div><!-- /.content -->
<div class="footer">
<img src="assets/images/24.png" />
COPYRIGHT 2017 SUNWAY GROUP
</div><!-- /.footer -->
<div class="clearfix"></div>
<div id="bx">
<div class="side-buttons">
<a href="#" class="btn btn-default text-uppercase">
<span class="changeMe">
<?php
echo count($user['Pledges']).'/'.$number_of_square;
?>
</span> <br />
<small>Pieces Revealed</small>
</a>
<a href="<?php echo $base_url; ?>pledge.php?new=1" class="btn btn-default text-uppercase">
Pledge
<img src="assets/images/23.png" height="20" style="margin-top: -2px;">
</a>
</div><!-- /.side-buttons -->
</div><!-- /#bx -->
</section><!-- /#wrapper -->
//////////MODAL below/////////
<!-- Modal -->
<div id="welcome" class="modal fade welcome" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center">
Unlock the Artwork with Your Words.
</h1>
<p class="text-center">
Select which tile of the artwork to unveil your pledge, and view pledges from others by browsing through the tiles.
</p>
</div>
<div class="modal-footer">
<div class="button-container">
<a href="<?php echo $base_url;?>pledge.php" class="btn btn-default text-uppercase">
Continue
<img src="assets/images/23.png" height="20" style="margin-top: -2px;">
</a>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dailog -->
</div><!-- /#welcome /.welcome-->
<!-- Modal -->
<div id="thePledge" class="modal fade thePledge" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-close-button">
<button class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div><!-- /.modal-close-button -->
<div class="col-sm-12">
<div class="back-top-left"></div>
<span>
<?php
$fb_id = 0;
if(isset($_SESSION['fb_uid'])){
$fb_uid = $_SESSION['fb_uid'];
}
?>
<img src='
<?php echo ($fb_uid > 0) ? "https://graph.facebook.com/{$fb_uid}/picture?type=large" : "assets/images/12.png"; ?>
' style="max-width:129px;" class="user-img">
</span>
<span class="text-head">
<?php
$fb_first_name = $fb_last_name = '';
if(isset($_SESSION['first_name'])){
echo $_SESSION['first_name'] . ' ' .$_SESSION['last_name'];
}else{
echo 'UnKnown';
}
?>:
</span>
<br><br>
</div><!-- /.col-sm-12 -->
<div class="col-sm-12 ">
<p class="set-content">I pledge to be champion of clean air and help keep Sunway Pyramid smoke-free. I will also be respectful of the responsible smokers who smoke in the designted areas.</p>
</div><!-- /.col-sm-12 -->
</div><!-- /.modal-body -->
<div class="modal-footer">
<div class="back-bottom-right"></div>
<div class="button-container">
<div class="pull-right">
<a href="#" class="sharing ">
<img src="assets/images/26.png" />
</a>
<span class="group-social">
<a href="#" class="facebook animated">
<img src="assets/images/facebook.png" />
</a>
<a href="#" class="message animated">
<img src="assets/images/message.png" />
</a>
</span>
</div><!-- /.pull-right -->
<div class="clearfix"></div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dailog -->
</div><!-- /#thePledge /.thePledge-->
我试图将上面的模态代码移到#wrapper 中，但是整个页面都会有一个模糊的覆盖。
我一直在摆弄 CSS，但似乎无法正确处理。
这是我的整个 css 文件:https://plnkr.co/edit/DP2s6HRgFfrDiT7ws0Se?p=preview
有人可以帮助我/为此提出解决方案吗？我检查了页面，当弹出模式在第一次加载时加载到页面时，“modal-open”类位于 body 标签上
最佳答案
作为documentation说:
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
也许这可以帮到你。
关于css - 将 Bootstrap 模式放入 div 包装器而不是 body，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42547759/