【问题标题】:bootstrap modal and mmenu menu clashing引导模式和菜单菜单冲突
【发布时间】:2016-05-04 10:49:12
【问题描述】:

我正在使用 bootstrap 和 mmenu 库设计一个网站。我正在尝试添加一个引导模式,该模式在单击 mmenu 中的按钮时打开

单击关闭、按 ESC 并在模态外部单击时,模态不会关闭。

我尝试使用相同的模式和菜单编写一个页面,其中模式是通过单击页面上的按钮打开的,而不是在菜单中,并且两者都运行良好。

我尝试了当单击 mmenu 内的按钮时出现的 mmenu 弹出窗口,但遇到了同样的问题。

我也很乐意得到一个通用的答案; 这两个库在哪里可能出现问题,以及如何解决它们。或者如何调试代码,以便我自己找出解决方案。我尝试在 Chrome 中检查控制台,但那里没有错误。我不知道如何进一步检查。

我添加了我的代码,以防熟悉 mmenu 和 bootstrap 库的人有具体的答案。谢谢大家的努力。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="CSS/bootstrap.css" rel="stylesheet" />  
    <link href="CSS/jquery.mmenu.themes.css" rel="stylesheet" />
    <link href="CSS/jquery.mmenu.all.css" rel="stylesheet" />
    <link href="CSS/jquery.mmenu.positioning.css" rel="stylesheet" />
    <script src="JS/jquery-1.11.3.min.js"></script>
    <script src="JS/jquery.mmenu.all.min.js"></script>
    <script src="JS/bootstrap.min.js"></script>

</head>
<body>
    <!-- Modal -->
    <button type ="button"><a href="#welcomeMenu">Menu</a></button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title
                    </h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close
                    </button>
                    <button type="button" class="btn btn-primary">Save changes
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <nav id="welcomeMenu" class="col-xs-12 col-sm-5">
            <div>
                <ul class="vertical">
                    <li> 
                        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
                             Launch demo modal
                        </button>
                    </li>                       
                </ul>
            </div>
        </nav>
    </div>
    <script type="text/javascript"> 
        $(document).ready(function () {
            $("#welcomeMenu").mmenu({
                extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
                offCanvas: {
                    position: "right",
                    zposition: "front"
                }
            });                                         
        });    
    </script>
</body>
</html>

Here is the fiddle.

【问题讨论】:

  • 如果此代码在线,请告诉我。我想要你的 CSS 和 js 路径,。
  • @PunitGajjar,我有一个名为 CSS 的文件夹,其中包含所有 css 文件和一个名为 JS 的文件夹,其中包含所有 js 文件。它不在线。所有的 css 和 js 文件都是 mmenu 或 bootstrap 的。
  • 请为此创建 jsfiddle。
  • 可能是因为冲突...看看你是否多次包含bootstrap.js
  • 是的。可能与此冲突。

标签: javascript jquery css twitter-bootstrap mmenu


【解决方案1】:

改为

删除此文件“CSS/jquery.mmenu.all.css”第 69 行中的 z-index:1

将主 css 文件中的 z-index 设置为自动

.mm-slideout { z-index:auto;}

【讨论】:

    【解决方案2】:

    您可以在自己的 css 文件中包含以下内容,而不是更改 jquery.mmenu.all.css 中的内容:

    body.modal-open .mm-slideout{
        z-index:inherit;
    }
    

    【讨论】:

    • 迄今为止最简单的解决方案。看错字虽然继承*
    • 哦,你是对的 - 我更正了:)谢谢你的提示
    【解决方案3】:

    删除此文件“CSS/jquery.mmenu.all.css”第69行中的z-index:1

    .mm-slideout{
        -webkit-transition:-webkit-transform .4s ease;
         transition:-webkit-transform .4s ease;
         transition:transform .4s ease;
         transition:transform .4s ease,-webkit-transform .4s ease;
         z-index:1
    }
    

    【讨论】:

      【解决方案4】:

      您的代码很好,当单击按钮关闭时,模式可以启动和关闭。我已经测试过了。问题出在您的**bootstrap version** 中。

      我看到你使用 bootstrap.css 而不是 min.css。如果您觉得您的连接速度和主机速度都很快,那将没有问题。否则,使用min

      顺便说一句,我使用v3.1.0 (min.js/min.css)jQuery v2.1.1

      【讨论】:

      • 我再次从 bootstrap 的站点下载了 bootstrap.min,并用新的替换了项目中的那个。模态仍然对我不起作用。
      • 冲突能解决你的问题吗?你现在用的是什么版本?包括,css、js和jquery? (三个是必须的)
      • 我正在使用最新的 bootstrap 和 mmenu 版本,因为我这周刚刚下载了它。如您在我的代码中所见,jquery 是 1.11.3,
      • 先尝试删除这些链接。
        &lt;link href="CSS/jquery.mmenu.themes.css" rel="stylesheet" /&gt; &lt;link href="CSS/jquery.mmenu.all.css" rel="stylesheet" /&gt; &lt;link href="CSS/jquery.mmenu.positioning.css" rel="stylesheet" /&gt; &lt;script src="JS/jquery.mmenu.all.min.js"&gt;&lt;/script&gt;看看有没有冲突
      • 我的 mmenu 需要这些链接。它们至关重要。
      【解决方案5】:

      您的代码运行良好,我已经对此进行了测试。 下面是要检查的小提琴。

      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
          Launch demo modal
      </button>
      
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
          <div class="modal-dialog" role="document">
              <div class="modal-content">
                  <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                  </div>
                  <div class="modal-body">
                      ...
                  </div>
                  <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                  </div>
              </div>
          </div>
      </div>
      <div class="container-fluid">
          <nav id="welcomeMenu" class="col-xs-12 col-sm-5">
              <div>
                  <ul class="vertical">
                      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li>
                      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Continue as guest</a></li>
                  </ul>
              </div>
          </nav>
          <div class="row">
              <!--a place for tips-->
              <div class="col xs-12 hidden-xs col-sm-3 ">
              </div>       
              <!--a place for text-->
              <div class="col-xs-12 col-sm-9">
                  <div class="page-header">
                      <h1>Welcome.</h1><br />
                      <small>We are glad to see you here.</small>
                  </div>
              </div>
          </div>
      </div>
      
      
      $(document).ready(function () {
                  $("#welcomeMenu").mmenu({
                      extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
                      offCanvas: {
                          position: "right",
                          zposition: "front"
                      }
                  });                                         
              });   
      

      这是工作模式:http://jsfiddle.net/okkf2bsr

      【讨论】:

      • 不,它没有。如果你看看你的小提琴,你会看到我的 mmenu 正在显示。它不应该显示。您没有使用 mmenu 库,这导致了我要解决的问题。
      • 好吧,问题出在 z-index 上。在小提琴下面添加.mm-slideout{z-index: 9999;}这个css检查,让我知道这是否有效。 fiddle
      • 我看到了你的小提琴,但那里只有模态。不是菜单。请查看我更新的问题。
      • 你能创建你的小提琴并将链接发送给我,以便我在那里调试吗?
      • 给你。 JSFiddle。在小提琴中,我对它们的问题略有不同。你会看到的。
      【解决方案6】:

      我之前也遇到过同样的问题。 所以我做了什么。

      我在 jquery 中添加以下代码。

       // Call Business logo modal.
                      $('#myModal_business').modal({
                          backdrop: 'static',
                          keyboard: false,
                          show: false
                      });
      

      然后通过 jquery 单击按钮后,您可以关闭或打开模式。 像这样

      $(".buttonclass").click( function() {
           $('#myModal_business').modal('show');
      
      });
      

      隐藏模态

      $('#myModal_business').modal('hide');
      

      【讨论】:

      • 我使用了你的代码,但模态仍然没有关闭。你的意思是你有同样的问题?我的问题是 mmenu 库和引导库之间的冲突。
      • 尝试将您的 css 和 js 文件发送给我们。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-18
      • 1970-01-01
      相关资源
      最近更新 更多