安装 jPanelMenu jQuery 插件后，我在 Twitter Bootstrap 中显示模式窗口时遇到问题。
问题是打算在模型后面的背景出现在模态之前。
背景的 z-index 是 1040，模态窗口的 z-index 是 1050，两者都设置为 position:fixed，所以一切都应该正确显示。
我发现了几个关于模态背景堆叠顺序问题的过去主题，但没有一个涉及 jPanel，我无法使用任何建议的解决方案。
运行 jPanel 插件清楚地引入了该问题，因为删除脚本库时它会消失。但是我不知道如何在启用 jPanel 的情况下解决它，因为它不会对 z-index 的变化做出反应，除非您将背景的 z-index 运行到 < 2 并且它完全消失。我在这里制作了一个显示问题的 JSFiddle：
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>