1
У меня возникла проблема с отображением модальных окон в Twitter Bootstrap после установки плагина jPanelMenu jQuery.jPanel messing с модальным окном Bootstraps
Проблема в том, что задний план, предназначенный для ухода за моделью, появляется перед модальным.
Z-индекс фона 1040, а индекс z модального окна 1050, и оба установлены в положение: фиксированное, поэтому все должно отображаться справа.
Я нашел несколько прошлых тем о проблемах с порядком укладки модального фона, но ни один из них, в котором участвует jPanel и я, не смог использовать ни одно из предлагаемых решений.
Проблема явно введена при запуске плагина jPanel, поскольку он исчезает при удалении библиотеки сценариев. Но я не могу понять, как разрешить его с помощью jPanel, так как он не реагирует на изменения в z-index, за исключением случаев, когда вы запускаете z-индекс заднего плана до < 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>