个人中心
gpt4 book ai didi

jquery - jPanel 与 Bootstraps 模式窗口混淆

转载 作者：行者123 更新时间：2023-12-01 08:03:12 24 4
gpt4 key购买 nike

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

问题是原本要放在模型后面的背景出现在模态前面。

背景的 z 索引是 1040，模态窗口的 z 索引是 1050，两者都设置为position:fixed，所以所有内容都应该显示正确。

我发现了几个关于模式背景堆叠顺序问题的过去主题，但没有一个涉及 jPanel，并且我无法使用任何建议的解决方案。

这个问题显然是通过运行 jPanel 插件引入的，因为当脚本库被删除时它就消失了。但我不知道如何在启用 jPanel 的情况下解决它，因为它不会对 z-index 的变化使用react，除非您将背景的 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 &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>

最佳答案

jPanelMenu 插件将所有内容推送到 .jPanelMenu-panel div，其 z 索引为 2。这最终会与 Bootstrap 模态元素的 z 索引发生冲突，如所示。

jPanelMenu 有一个名为 excludedPanelContent 的选项:

A selector string specifying which elements within the <body> element should not be pushed into .jPanelMenu-panel. The selector string may contain any selector, not just tags.

Generally, <style> and <script> tags should not be moved from their original location, but in certain circumstances (mostly advertising), <script> tags may need to move with the page content.

Data Type: string

Default Value: style, script

解决方案是排除 <body> 中最顶层的元素包含 Bootstrap 模式标记。在您的情况下，我首先会重新定位模式标记，使其成为 <body> 中的顶级元素。 ，然后排除 .modal :

var jPM = $.jPanelMenu({
  excludedPanelContent: 'style, script, .modal'
});

重新定位模态标记是必要的，以便可以独立排除它；你的主要内容 div 仍然需要被插入 .jPanelMenu-panel为了使 jPanel 菜单切换正常工作。

查看更新后的 fiddle http://jsfiddle.net/DebF6/7/

关于jquery - jPanel 与 Bootstraps 模式窗口混淆，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18239227/

24 4 0
文章推荐： jquery - 可以使用 .attr 创建自定义属性吗？
文章推荐： jquery - 从查询错误中进行多项选择
文章推荐： python - 使用 0.8.8+ 版本在页眉或页脚中添加页码
文章推荐： java - java中的月初和月末时间戳
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com