Question

安装jPanelMenu jQuery插件后，我在Twitter Bootstrap中显示模态窗口时遇到问题。

问题是打算放在模型后面的背景出现在模态的前面。

背景的z-index是1040，模态窗口的z-index是1050，两者都设置为position：fixed，所以一切都应该显示正确。

我找到了几个关于模态背景的堆叠顺序问题的过去的主题，但是没有涉及jPanel和我的任何一个都无法使用任何建议的解决方案。

通过运行jPanel插件可以清楚地解决问题，因为当删除脚本库时它会消失。但我无法弄清楚如何在启用jPanel的情况下解决它，因为它不会对z-index中的更改做出反应，除非您将背景的z-index运行到＆lt; 2它消失了altogehter。我在这里制作了一个显示问题的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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a>
            </p>
          </div>
          <!--/span--> </div>
        <!--/row--> </div>
      <!--/span--> </div>
    <!--/row-->

    <hr>

    <footer>
      <p>&copy; 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>

Answer 1

jPanelMenu插件将所有内容推送到.jPanelMenu-panel div，其z索引为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/

上的更新小提琴

Answer 2

只需将此css代码添加到您的网站即可。

.modal-open .jPanelMenu-panel{position:static!important;transform:none!important;}

打开bootstrap模式时会禁用jPanelMenu overlay，以防止它们之间发生冲突。

祝你好运！

jPanel搞乱了Bootstraps模态窗口

2 个答案: