91

我是个菜鸟，所以我想我正在用 twitter 引导模式监督一些事情（可能很明显）。我想要做的是让一个模式只在移动设备上启动。这适用于在模态 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。实际上所有的引导 js 模块（不要错过包含）。我对js没有经验..

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

4

10 回答 10

219

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

于 2012-11-30T23:17:28.480 回答
27

我在关闭引导模式对话框时遇到问题，如果它是通过以下方式打开的：

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

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

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

不要忘记初始化：

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

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

data-dismiss="modal" data-target="#myModal"
于 2012-05-16T17:17:15.503 回答
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>
于 2013-08-12T16:54:22.140 回答
13

.modal('hide')手动隐藏模式。使用以下代码关闭您的引导模型

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

看看这里的工作代码笔

或者

在这里试试

$(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 -->

于 2015-10-25T06:15:47.567 回答
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>
于 2012-05-08T13:55:03.150 回答
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
于 2016-04-01T06:05:23.430 回答
3

试试这个。。

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

$('.modal-backdrop').remove();
于 2013-06-24T07:13:53.130 回答
2

I had the same problem in the iphone or desktop, didnt manage to close the dialog when pressing the close button.

i found out that The <button> tag defines a clickable button and is needed to specify the type attribute for a element as follow:

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

check the example code for bootstrap modals at : BootStrap javascript Page

于 2014-06-04T21:15:02.470 回答
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>

查询：

$(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;
      }
    });
});

如您所见，此提交执行处理，这就是为什么我为此模式使用此 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');
                    }
                }
         });
    });
于 2016-07-19T14:32:59.780 回答
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"属性选项一起使用是正确的data-toggle。该方案自动生效！

于 2016-04-22T14:27:38.800 回答