安装jPanelMenu jQuery插件后，我在Twitter Bootstrap中显示模式窗口时遇到问题。
问题在于，打算放在模型后面的背景出现在模态的前面。
背景的Z索引为1040，模态窗口的Z索引为1050，并且两者均设置为position：fixed，因此所有内容应正确显示。
我发现了一些有关模态背景的堆叠顺序问题的历史主题，但没有涉及jPanel的主题，因此我无法使用任何建议的解决方案。
通过运行jPanel插件，很明显地引入了该问题，因为在删除脚本库后它会消失。但是我无法弄清楚如何在启用jPanel的情况下解决该问题，因为它不会对z-index的变化做出反应，除了将背景的z-index减小到
http://jsfiddle.net/funkylaundry/DebF6/3/light/
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as
<a href="#" class="navbar-link">Username</a>
</p>
<ul class="nav">
<li>
<a class="menu-trigger" href="#">Menu</a>
</li>
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse --> </div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-primary btn-large" data-toggle="modal">Launch demo modal</a>
<hr>
<a href="#myModal" role="button" class="btn btn-primary btn-large menu-trigger">Launch jPanel Menu</a>
</p>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<!--/span--> </div>
<!--/row-->
<div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<!--/span-->
<div class="span4">
<h2>Heading</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
</p>
<p>
<a class="btn" href="#">View details »</a>
</p>
</div>
<!--/span--> </div>
<!--/row--> </div>
<!--/span--> </div>
<!--/row-->
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div>
<nav class="span3" id="menu" style="display:none;">
<div id="navigator" class="navigation row-fluid">
<div class="navbox">
<ul class="nav nav-list">
<li>
<a href="/">Listen</a>
</li>
<li>
<a href="/Playlist">Playlists</a>
</li>
<li>
<a href="#">Charts</a>
</li>
<li>
<a href="/Account/Manage">My Profile</a>
</li>
</ul>
</div>
</div>
</nav>
<!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.js"></script>
<script src="js/jquery.jpanelmenu.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('document').ready(function(){
var jPM = $.jPanelMenu();
jPM.on();
});
</script>
</body>
最佳答案
jPanelMenu插件将所有内容压入.jPanelMenu-panel div，该div的z-index为2。这最终与Bootstrap模态元素的z-index冲突。
jPanelMenu有一个名为excludedPanelContent的选项：
一个选择器字符串，用于指定不应将<body>元素中的哪些元素压入.jPanelMenu-panel。选择器字符串可以包含任何选择器，而不仅仅是标签。
通常，<style>和<script>标签不应从其原始位置移开，但在某些情况下（主要是广告），<script>标签可能需要与页面内容一起移动。
数据类型：string
默认值：style, script
一种解决方案是排除<body>中包含Bootstrap模态标记的最顶层元素。在您的情况下，我将首先重新定位模式标记，使其成为您<body>中的顶级元素，然后排除.modal：
var jPM = $.jPanelMenu({
excludedPanelContent: 'style, script, .modal'
});
有必要重新定位模式标记，以便可以独立排除它；您的主要内容div仍需要压入
.jPanelMenu-panel，以便jPanel菜单切换正常工作。在http://jsfiddle.net/DebF6/7/上查看更新的小提琴