如何关闭Twitter Bootstrap模式（初始启动后）

91

我是一个菜鸟，所以我认为我正在使用twitter bootstrap modal监视某些事情（可能很明显）。我正在尝试做的是获得一个仅在移动设备上启动的模式。在模式div上添加类.visible-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没有经验。

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

twitter-bootstrap modal-dialog

— 莫妮克·德·哈斯（Monique De Haas）
source

219

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

— 扁桃体凝胶
source

是的，那很好。但是我没有使用'data-dismiss =“ modal”'的动画吗？

— 克里斯（Chris）

好的，我的错误。实际上，我不记得当时遇到的问题，我现在使用它，它可以完美运行。TY！

— 克里斯（Chris）

在此处了解更多信息..stackoverflow.com

— questions/10944302/

6

这很奇怪，$('#myModal').modal('show')为我工作，但隐藏却没有。

— 夏洛特

3

@LittleBigBot尝试$('#myModal').modal('toggle');改用

— Edson Horacio Junior

27

如果使用以下方式打开引导程序模式对话框，则无法关闭它：

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

我通过以下链接打开对话框解决了此问题：

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

不要忘记初始化：

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

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

data-dismiss="modal" data-target="#myModal"

— Artkoenig
source

嗨artjom。谢谢！将运行它并提供反馈。您不使用à按钮打开模式吗？因为这就是我想要实现的目标。最初的想法是模式化启动，并且仅在移动设备上才能提供à快速导航菜单来定位（而不是在桌面上直接相关）。

— 莫妮克·德·哈斯

是的，data-dismiss =“ modal” data-target =“＃myModal”解决了我的问题！适用！

— Dheeraj Thedijje 2015年

13

将类隐藏添加到模态

<!-- Modal Demo -->
<div class="modal hide" id ="myModal" aria-hidden="true" >

JavaScript代码

 <!-- Use this to hide the modal necessary for loading and closing the modal-->
 <script>
     $(function(){
         $('#closeModal').click(function(){
              $('#myModal').modal('hide');
          });
      });
 </script>

 <!-- Use this to load the modal necessary for loading and closing the modal-->
 <script>
     $(function () {
         $('#myModal').modal('show');
     });
  </script>

— un
source

13

.modal（'hide'）手动隐藏模式。使用以下代码关闭引导程序模型

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

在这里看看可工作的Codepen

要么

试试这里

显示代码段

$(function () {
    $(".custom-close").on('click', function() {
        $('#myModal').modal('hide');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<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" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        
          
          <a class="custom-close"> My Custom Close Link </a>
          
          
      </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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

展开摘要

— 苏博德·古拉谢
source

6

尝试确切指定按钮应与数据目标一起关闭的模式。因此您的按钮应如下所示-

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

另外，您只需要bootstrap.modal.js，这样就可以安全地删除其他文件。

编辑：如果这不起作用，则删除可见电话类，并在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>

— 西蒙·坎宁安
source

嗨@Simon Cunningham Tnx，一百万回答！我已经输入了数据目标。无法正常工作（不幸的是），然后我删除了可视电话类。没有改变。code <div class =“ modal visible-phone” id =“ myModal”> <div class =“ modal-header”> <button class =“ close” data-dismiss =“ modal” data-target =“＃myModal”>× </ button> <h3>文本介绍<br>想导航到... </ h3> </ div> <div class =“ modal-body”> <ul class =“ nav”> <li> .. 。此处的链接列表</ li> <li> link2 </ li> <li> link3 </ li> </ ul> </ div> </ div>code

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

— 莫妮克·德·哈斯

对不起，那里的文本混乱;）我听了你的建议。给关闭按钮一个确切的数据目标似乎合乎逻辑。但是不知何故我仍然无法正常工作。即使禁用可见电话。似乎不影响关闭按钮。（这是一件好事）

— 莫妮克·德·哈斯

最初如何打开模态？尝试按以下方式打开它-<a data-toggle="modal" href="#myModal" class="btn">打开模式</a>

— Simon Cunningham，

我在原始答案中添加了一些简化的演示代码。javascript和css文件是我的测试项目的本地文件，只需将其替换为您自己的链接即可。

— 西蒙·坎宁安

6

根据文档，隐藏/切换应该起作用。但事实并非如此。

这是我做的

$('#modal-id').modal('toggle'); //Hide the modal dialog
$('.modal-backdrop').remove(); //Hide the backdrop
$("body").removeClass( "modal-open" ); //Put scroll back on the Body

— 用户名
source

1

这实际上是正确的“蛮力”答案..但我建议将其重写以使动画正确：

$("#modal-id").modal("toggle"); $(".modal-backdrop").fadeOut('fast',function(){     $("body").removeClass( "modal-open" );     $(".modal-backdrop").remove(); });

— DerDu

3

试试这个

$('body').removeClass('modal-open');

$('.modal-backdrop').remove();

— 塞克
source

1

我在iPhone或台式机上遇到了同样的问题，按关闭按钮时没有设法关闭对话框。

我发现该<button>标记定义了一个可单击的按钮，需要为一个元素指定type属性，如下所示：

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

在以下位置查看引导程序模态的示例代码： BootStrap javascript Page

— 伊斯玛
source

0

如果同时显示的模态很少，则可以使用属性data-toggle和来为模态按钮指定目标模态data-target：

<div class="modal fade in" id="sendMessageModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm">
           <div class="modal-content">
                <div class="modal-header text-center">
                     <h4 class="modal-title">Modal Title</h4>
                     <small>Modal Subtitle</small>
                </div>
                <div class="modal-body">
                     <p>Modal content text</p>
                </div>
                <div class="modal-footer">
                     <button type="button" class="btn btn-default pull-left" data-toggle="modal" data-target="#sendMessageModal">Close</button>
                     <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#sendMessageModal">Send</button>
                </div>
           </div>
      </div>
 </div>

在模式代码之外的某个地方，您可以具有另一个切换按钮：

<a href="index.html#" class="btn btn-default btn-xs" data-toggle="modal" data-target="#sendMessageModal">Resend Message</a>

这些按钮处于隐藏状态时，用户无法单击模式内切换按钮，并且它可以与"modal"attribute 选项一起使用data-toggle。该方案自动完成！

— 声霸卡
source

0

这是一个片段，不仅用于关闭模态而不刷新页面，而且在按Enter时将提交模态并关闭而不刷新

我已经在我的站点上设置了它，在这里我可以有多个模态，一些模态在提交时处理数据，而有些则没有。我要做的是为每个处理的模态创建一个唯一的ID。例如在我的网页中：

HTML（模式页脚）：

 <div class="modal-footer form-footer"><br>
              <span class="caption">
                <button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart&nbsp; <i class="fa fa-shopping-cart"></i></button>     
                <button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel&nbsp; <i class="fa fa-close"></i></a>
              </span>
      </div>

jQUERY：

$(document).ready(function(){
// Allow enter key to trigger preloadorders form
    $(document).keypress(function(e) {       
      if(e.which == 13) {   
          e.preventDefault();   
                if($(".trigger").is(".ok")) 
                   $("#PreLoadOrders").trigger("click");
                else
                    return;
      }
    });
});

如您所见，此Submit执行处理，这就是为什么我为此模态使用此jQuery的原因。现在让我们说我在该网页中有另一个模式，但是没有执行任何处理，并且由于一次打开了一个模式，因此我将另一个$(document).ready()放在了所有页面都可以获取的全局php / js脚本中，并为该模式的关闭按钮提供了一个名为：的类".modal-close"：

HTML：

<div class="modal-footer caption">
                <button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>

jQuery（包括global.inc）：

  $(document).ready(function(){
         // Allow enter key to trigger a particular button anywhere on page
        $(document).keypress(function(e) {
                if(e.which == 13) {
                   if($(".modal").is(":visible")){   
                        $(".modal:visible").find(".modal-close").trigger('click');
                    }
                }
         });
    });

— yardpenalty.com
source