关闭引导模式

【问题标题】：Close Bootstrap Modal关闭引导模式
【发布时间】：2013-05-05 18:55:36
【问题描述】：

我有一个我想最初显示的引导模式对话框，然后当用户点击页面时，它就会消失。我有以下内容：

$(function () {
   $('#modal').modal(toggle)
});

 <div class="modal" id='modal'>
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Error:</h3>
        </div>
        <div class="modal-body">
        <p>Please correct the following errors:</p>
        </div>
     </div>
 </div>

模态框最初显示，但在模态框外单击时不会关闭。此外，内容区域没有变灰。我怎样才能让模式最初显示，然后在用户点击区域外后关闭？我怎样才能让背景像演示中那样变灰？

【问题讨论】：

标签： jquery twitter-bootstrap modal-dialog


【解决方案1】：

我的回答与上述许多其他问题并不严格相关。但是这些对话帮助我弄清楚了为什么当我点击一个非常通用的关闭按钮时我的引导模式没有反应，而当我按下 ESC 按钮时它仍然关闭它。

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

它可能对某人有帮助。

如果您将代码放入您的代码中（在某些特殊情况下是有意义的）：

$modal.off('click')

那么也会导致modal不会因为事件被阻塞而关闭。

在这种情况下，您必须自己处理：

$modal
  .on('click', '[data-dismiss="modal"]', function() {
      $modal.modal('hide');
  });

【讨论】：

    【解决方案2】：

    这对我有用。我是新手，请忽略我同时使用 JQuery 和 Vanilla JavaScript。

    document.addEventListener("click",function(){
        $(".modal").modal('hide');
        });

    【讨论】：

      【解决方案3】：

      只需在模态中添加它

      div tabindex="-1"

      【讨论】：

        【解决方案4】：

        您可以看到this reference，但如果此链接已被删除，请阅读以下说明：

        使用单行 JavaScript 调用 id 为 myModal 的模式：

        $('#myModal').modal(options)

        选项

        选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到 data-，如 data-backdrop=""。 

        |-----------|-------------|--------|---------------------------------------------|
| Name      | Type        | Default| Description                                 |
|-----------|-------------|--------|---------------------------------------------|
| backdrop  | boolean or  | true   | Includes a modal-backdrop element.          |
|           | the string  |        | Alternatively, specify static for a         |
|           | 'static'    |        | backdrop which doesn't close the modal      |
|           |             |        | on click.                                   |
|           |             |        |                                             |
| keyboard  | boolean     | true   | Closes the modal when escape key is pressed.|   
|           |             |        |                                             |
| focus     | boolean     | true   | Puts the focus on the modal when initialized|       
|           |             |        |                                             |
| show      | boolean     | true   | Shows the modal when initialized.           |
|-----------|-------------|--------|---------------------------------------------|

        方法

        异步方法和转换

        所有 API 方法都是异步的并开始一个转换。他们回来了 转换开始但在结束之前立即发送给调用者。 此外，对过渡组件的方法调用将是 忽略。

        See our JavaScript documentation for more information.

        .modal(选项)

        将您的内容激活为模式。接受一个可选的选项对象。

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

        .modal('toggle')

        手动切换模式。 在模态框实际显示或隐藏之前返回给调用者（即在 shown.bs.modal 或 hidden.bs.modal 事件发生之前）。

        $('#myModal').modal('toggle')

        .modal('show')

        手动打开一个模式。 在模态框实际显示之前返回给调用者（即在 shown.bs.modal 事件发生之前）。

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

        .modal('hide')

        手动隐藏模式。 在模态框实际隐藏之前返回调用者（即在 hidden.bs.modal 事件发生之前）。

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

        .modal('handleUpdate')

        如果模态框在打开时的高度发生变化（即出现滚动条时），请手动重新调整模态框的位置。

        $('#myModal').modal('handleUpdate')

        .modal('dispose')

        销毁一个元素的模态。

        活动

        Bootstrap 的模态类公开了一些用于连接模态功能的事件。所有模态事件都在模态本身触发（即在 ** 处）。 类型说明

        |----------------|--------------------------------------------------------------|
| Event Type     | Description                                                  |
|----------------|--------------------------------------------------------------|
| show.bs.modal  | This event fires immediately when the **show** instance      |
|                | method is called. If caused by a click, the clicked element  |
|                | is available as the **relatedTarget** property of the event. | 
|                |                                                              |
| shown.bs.modal | This event is fired when the modal has been made visible to  |
|                | the user (will wait for CSS transitions to complete). If     |
|                | caused by a click, the clicked element is available as the   | 
|                | **relatedTarget** property of the event.                     |
|                |                                                              |
| hide.bs.modal  | This event is fired immediately when the **hide** instance   |
|                | method has been called.                                      |
|                |                                                              |
| hidden.bs.modal| This event is fired when the modal has finished being hidden |
|                | from the user (will wait for CSS transitions to complete).   |
|----------------|--------------------------------------------------------------|

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

        【讨论】：

          【解决方案5】：

          经过一些测试，我发现对于bootstrap modal需要等待一段时间才能执行$(.modal).modal('hide')在执行$(.modal).modal('show')之后。我发现在我的情况下，两者之间至少需要 500 毫秒的间隔。
          所以这是我的测试用例和解决方案：

          $('.modal-loading').modal('show');
setTimeout(function() {
  $('.modal-loading').modal('hide');
}, 500);

          【讨论】：

          • 这解决了我打开另一个模态时没有关闭的问题，谢谢
          【解决方案6】：

          试试这个

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

          【讨论】：

          • 我认为这提供了问题的答案。
          • 我同意。这个答案对问题更准确。
          • @MarceloAgimóvel :-)
          【解决方案7】：

          有时解决方案不起作用，因此您必须正确删除 in 类并手动添加 css display:none。

          $("#modal").removeClass("in");
$("#modal").css("display","none");

          【讨论】：

            【解决方案8】：

            在我的例子中，我使用了一个按钮来显示模态

            <button type="button" class="btn btn-success" style="color:white"
    data-toggle="modal" data-target="#my-modal-to-show" >
    <i class="fas fa-plus"></i> Call MODAL
</button>

            所以在我的代码中，要关闭模式（具有 id = 'my-modal-to-show'）我调用该函数（在 Angular 打字稿中）：

            closeById(modalId: string) {
  $(modalId).modal('toggle');
  $(modalId+ ' .close').click();
}

            如果我调用 $(modalId).modal('hide') 它不起作用，我不知道为什么

            PS.：在我的模态中，我也用 .close 类对按钮元素进行了编码

            <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    <span aria-hidden="true">&times;</span>
</button>

            【讨论】：

              【解决方案9】：

              这很好用

              $(function () {
   $('#modal').modal('toggle');
});

              但是，当您将多个模态堆叠在一起时，它就无效了，因此，这是可行的

              data-dismiss="modal"

              【讨论】：

                【解决方案10】：

                这对我有用：

                <span class="button" data-dismiss="modal" aria-label="Close">cancel</span>

                使用此链接modal close

                【讨论】：

                  【解决方案11】：

                  我用这个技巧以编程方式关闭了模态

                  使用data-dismiss="modal" 在模态中添加一个按钮，并使用display: none 隐藏该按钮。这是它的样子

                  <div class="modal fade" id="addNewPaymentMethod" role="dialog">
  <div class="modal-dialog">
   .
   .
   .
   <button type="button" id="close-modal" data-dismiss="modal" style="display: none">Close</button>
  </div>
</div>

                  现在，当您想以编程方式关闭模式时，只需在该按钮上触发点击事件，用户看不到该按钮

                  在 Javascript 中，您可以触发点击该按钮，如下所示：

                  document.getElementById('close-modal').click();

                  【讨论】：

                    【解决方案12】：

                    在我的情况下，触发引导模式的主页在使用$("#modal").modal('toggle'); 方式后开始没有响应，但开始以以下方式响应：

                    $("#submitBtn").on("click",function(){
  $("#submitBtn").attr("data-dismiss","modal");
});

                    【讨论】：

                      【解决方案13】： 
                         function Delete(){
       var id = $("#dgetid").val();
       debugger
       $.ajax({
           type: "POST",
           url: "Add_NewProduct.aspx/DeleteData",
           data: "{id:'" + id + "'}",
           datatype: "json",
           contentType: "application/json; charset=utf-8",
           success: function (result) {
               if (result.d == 1) {
                   bindData();
                   setTimeout(function(){ $('#DeleteModal').modal('hide');},1000);
               }
           }
       });
   };

                      【讨论】：

                      • 嗨 - 感谢您的回答。我已将其格式化为代码（这相当简单 - 只是将第一行缩进一点）。但是我猜这里只有$('#DeleteModal').modal('hide'); 是相关的？
                      【解决方案14】：

                      你可以使用；

                      $('#' + $('.modal.show').attr('id')).modal('hide');

                      【讨论】：

                        【解决方案15】：

                        这段代码非常适合我关闭模式（我使用的是 bootstrap 3.3）

                        $('#myModal').removeClass('in')

                        【讨论】：

                          【解决方案16】： 

                          <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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.7/js/bootstrap.min.js"></script>
<script>
$(window).load(function(){
      $('#myModal').modal('show');
});
$(function () {
   $('#modal').modal('toggle');
});
</script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

                          【讨论】：

                          • 错误：“消息”：“未捕获的类型错误：$(...).modal 不是函数”
                          • 是的。如果 Chrome (Linux Mint) 中的“运行代码 sn-p”出现错误。但它适用于 Firefox。
                          • @Ivan Burlutskiy，感谢您通知我，这是 jquery 包含的问题，所以我修复了它。现在它在所有浏览器中都能正常工作。
                          【解决方案17】：

                          $('.modal.in').modal('hide');

                          如果您在一页中使用多个模态弹出窗口，请使用上述代码隐藏模态的背景。

                          【讨论】：

                          • 或者只有$('.modal').modal('hide'); 可以。
                          【解决方案18】：

                          这样做的另一种方法是首先删除类modal-open，它会关闭模态。然后你移除移除模态的灰色覆盖的类modal-backdrop。

                          可以使用以下代码：

                          $('body').removeClass('modal-open')
$('.modal-backdrop').remove()

                          【讨论】：

                          【解决方案19】：

                          我们可以通过以下方式关闭模态弹窗：

                          // We use data-dismiss property of modal-up in html to close the modal-up,such as

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

 // We can close the modal pop-up through java script, such as

 <div class='modal fade pageModal'  id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'>

    $('#openModal').modal('hide'); //Using modal pop-up Id.
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

                          【讨论】：

                            【解决方案20】：

                            这个非常好，它也适用于 angular 2 

                            $("#modal .close").click()

                            【讨论】：

                            • 为我工作而不是 $('#modal').modal('toggle'); 没有效果。
                            【解决方案21】：

                            使用 modal.hide 只会隐藏模式。如果您在模态下方使用叠加层，它仍然会存在。使用点击调用来实际关闭模态并删除覆盖。

                            $("#modalID .close").click()

                            【讨论】：

                              【解决方案22】：

                              此外，您可以“单击”关闭对话框的“x”。 例如：

                              $(".ui-dialog-titlebar-close").click();

                              【讨论】：

                                【解决方案23】： 
                                $("#your-modal-id").modal('hide');

                                通过类 ($(".my-modal")) 运行此调用将不起作用。

                                【讨论】：

                                  【解决方案24】：

                                  在某些情况下，输入错误可能是罪魁祸首。例如，确保你有：

                                  data-dismiss="modal"

                                  而不是

                                  data-dissmiss="modal"

                                  请注意第二个示例中的双“ss”会导致关闭按钮失败。

                                  【讨论】：

                                    【解决方案25】： 
                                    $('#modal').modal('toggle');

                                    或

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

                                    应该可以。

                                    但如果没有其他方法，您可以直接调用模态关闭按钮：

                                    $("#modal .close").click()

                                    【讨论】：

                                    • 带有 hide() 的那个会关闭模态框，但会使背景模糊。 $("#modal .close").click() 做得很好。谢谢！
                                    • 这已经清楚地记录在案了，这里不需要伪造点击，这看起来很笨拙。正确答案是：$('#modal').modal('hide');
                                    • this -> $('#modal').modal().hide();
                                    • 我有一个模型不能用$('#modal').modal('hide') 关闭，但是我可以用$('#modal').modal('toggle') 关闭它，但在关闭后会显示一个垂直滚动条。所以对我来说$('#modal').hide() 工作得很好，但我想知道这是否会造成任何问题？我在$('#modal .close').click() 内部编码，所以我认为我不能用它来关闭模式。
                                    【解决方案26】：

                                    要关闭引导程序modal，您可以将 'hide' 作为选项传递给模态方法，如下所示

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

                                    请看看工作fiddle here

                                    bootstrap 还提供了可以挂钩到modal 功能的事件，例如，如果您想在模式对用户隐藏完毕后触发事件，您可以使用 hidden.bs.modal您可以在 Documentation

                                    中阅读有关模态方法和事件的更多信息

                                    如果上述方法都不起作用，请为您的关闭按钮提供一个 id 并触发点击关闭按钮。

                                    【讨论】：

                                    • $('#modal').modal('toggle');更好地隐藏模态阴影
                                    • @hamzeh.hanandeh, toggle 保留覆盖，不是解决方案。您应该始终使用show 或hide。
                                    【解决方案27】：

                                    我在这方面的五分钱是我不想用 id 来定位引导模式，并且看到一次应该只有一个模式，以下应该足以将模式删除为切换可能很危险：

                                    $('.modal').removeClass('show');

                                    【讨论】：

                                    • 意图是好的，但这种方法并不总是有效。其他页面元素，包括&lt;body&gt;，添加了类，这些类也必须还原。最好的答案是使用'hide' 方法。
                                    【解决方案28】：

                                    用modal('toggle')代替modal(toggle)

                                    $(function () {
   $('#modal').modal('toggle');
});

                                    【讨论】：

                                    • 完全包含“切换”是多余的。只要确保在模态 div 上没有“隐藏”类。但是，是的，错字导致了这个问题。所以+1
                                    • 不，它没有按预期工作，它隐藏了模态元素但背景覆盖元素仍然存在，您应该使用@Subodth 解决方案。
                                    • @Pierre - 考虑删除你的评论，.modal().hide() 与 .modal('hide') 不同，你会迷惑人的。
                                    • 就像帕里克所说，正确的答案是使用 modal('hide')
                                    • 这不是正确答案，请检查下面的答案！
                                    猜你喜欢
                                    • 1970-01-01
                                    • 1970-01-01
                                    • 2023-03-31
                                    • 1970-01-01
                                    • 2016-01-12
                                    • 1970-01-01
                                    • 2015-06-27
                                    • 2013-05-23
                                    相关资源
                                    最近更新 更多
                                    热门标签
                                    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode