首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何关闭twitter bootstrap模式(在初始启动后)

如何关闭twitter bootstrap模式(在初始启动后)
EN

Stack Overflow用户
提问于 2012-05-08 16:49:02
回答 7查看 186K关注 0票数 91

我是一个新手,所以我认为我在用twitter bootstrap模式监督一些事情(可能很明显)。我正在尝试做的是让一个模式只在移动设备上启动。在模式div上添加.visual-phone类可以很好地工作。到目前一切尚好。但是我想让它工作,这意味着你可以用X按钮关闭它。而且我也不能按下按钮。

<div class="modal visible-phone" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>text introductory<br>want to navigate to...</h3>
 </div>
 <div class="modal-body">
    <ul class="nav">
      <li> ... list of links here </li>
    </ul>
   </div>
  </div>

在html的底部,我放入了jquery.js (第一个)、bootstrap.modal.js和bootstrap.transition.js。实际上所有的bootstrap js模块(不能错过一个include)。我没有使用js的经验。

如果我提出了一个非常愚蠢的问题,请原谅我。我在日志中找不到这个特定情况的答案。

EN

回答 7

Stack Overflow用户

发布于 2012-12-01 07:17:28

$('#myModal').modal('hide')应该能做到

票数 219
EN

Stack Overflow用户

发布于 2012-05-17 01:17:16

如果使用以下命令打开引导模式对话框,我会遇到问题:

$('#myModal').modal('show');

我通过以下链接打开对话框解决了这个问题:

<a href="#myModal" data-toggle="modal">Open my dialog</a>

别忘了初始化:

$('#myModal').modal({show: false});

我还为关闭按钮使用了以下属性:

data-dismiss="modal" data-target="#myModal"
票数 27
EN

Stack Overflow用户

发布于 2012-05-08 21:55:03

尝试使用data-target精确地指定按钮应该关闭的模式。因此,您的按钮应如下所示-

<button class="close" data-dismiss="modal" data-target="#myModal">×</button>

此外,您应该只需要bootstrap.modal.js,这样就可以安全地删除其他代码。

编辑:如果这不起作用,那么删除visible-phone类,并在PC浏览器上测试它,而不是在手机上。例如,这将显示您是否收到javascript错误或是否存在兼容性问题。

编辑:演示代码

<html>
<head>
    <title>Test</title>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/bootstrap.modal.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function () {
        if( navigator.userAgent.match(/Android/i)
            || navigator.userAgent.match(/webOS/i)
            || navigator.userAgent.match(/iPhone/i)
            || navigator.userAgent.match(/iPad/i)
            || navigator.userAgent.match(/iPod/i)
            || navigator.userAgent.match(/BlackBerry/i)
          ) {
          $("#myModal").modal("show");
        }

        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
      });
    </script>
</head>
<body>
    <div class="modal hide" id="myModal">
      <div class="modal-header">
        <a class="close" id="myModalClose">×</a>
        <h3>text introductory<br>want to navigate to...</h3>
     </div>
     <div class="modal-body">
        <ul class="nav">
          <li> ... list of links here </li>
        </ul>
   </div>
  </div>
</body>
</html>
票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10495421

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档