PROSAGA码农传奇-Bootstrap-关闭Bootstrap模态

0# AsuRa | 2019-08-31 10-32

的
我用这个技巧以编程方式关闭了模态
</强>

在模态中添加一个按钮
data-dismiss=”modal”
然后隐藏按钮
display: none
。这是它的样子

. . .
</code>

现在，当你想以编程方式关闭模态时的触发点击事件 </强> 在该按钮上，用户看不到在Javascript中，您可以触发单击该按钮，如下所示： document.getElementById(‘close-modal’).click(); </code>

1# 12345 | 2019-08-31 10-32


    
      $(‘#modal’).modal(‘toggle’); 
</code>


  
    要么
  

   
    
      $(‘#modal’).modal().hide();
</code>
  

  
    应该管用。
  

  
    但如果没有其他工作可以直接调用模态关闭按钮：
  

   
    
      $(“#modal .close”).click()
</code>

2# 哦哦了 | 2019-08-31 10-32

另一种方法是首先删除类modal-open，这将关闭模态。然后删除类模态背景，删除模态的灰色封面。

可以使用以下代码：


    
      $(‘body’).removeClass(‘modal-open’)
$(‘.modal-backdrop’).remove()  
</code>

3# 爱我真好 | 2019-08-31 10-32

的
我们可以通过以下方式关闭模式弹出窗口：
</强>

// We use data-dismiss property of modal-up in html to close the modal-up,such as
// We can close the modal pop-up through java script, such as

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

4# 如果 | 2019-08-31 10-32

您可以使用;


    
      $(‘#’ + $(‘.modal.show’).attr(‘id’)).modal(‘hide’);
</code>

5# 12345 | 2019-08-31 10-32

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


    
      $(“#modalID .close”).click()
</code>

6# Frui tenebris、 | 2019-08-31 10-32

就我而言，我用一个按钮来显示模态


    
      
</code>


  
    所以在我的代码中，要关闭模态（具有id =’my-modal-to-show’），我调用该函数（在Angular typescript中）：
  

   
    
      closeById(modalId: string) {
  $(modalId).modal(‘toggle’);
  $(modalId+ ‘ .close’).click();
}
</code>
  

  
    如果我调用$（modalId）.modal（’hide’）它不起作用，我不知道为什么
  

  
    PS。：在我的模态中，我用.close类编写了那个按钮元素
  

   
    
      
</code>

7# 5678 | 2019-08-31 10-32

这对我有用：


    
      cancel
</code>


  
    使用此链接
    
      莫代尔关闭

8# 小鬼 | 2019-08-31 10-32


    
      $(“#your-modal-id”).modal(‘hide’);
</code>


  
    通过课程运行此调用
     
      ($(“.my-modal”))
    
     不行。

9# 大魔王 | 2019-08-31 10-32

在我的例子中，触发bootstrap模式的主页面在使用后开始没有响应
$(“#modal”).modal(‘toggle’);
方式，但开始以下列方式响应：


    
      $(“#submitBtn”).on(“click”,function(){
  $(“#submitBtn”).attr(“data-dismiss”,”modal”);
});
</code>

10# Ni | 2019-08-31 10-32

在某些情况下，打字错误可能是罪魁祸首。例如，确保您拥有：


    
      data-dismiss=”modal”
</code>


  
    并不是
  

   
    
      data-dissmiss=”modal”
</code>
  

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

11# 流浪海。 | 2019-08-31 10-32

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


    
      $(‘#myModal’).removeClass(‘in’)
</code>

12# WL | 2019-08-31 10-32

$(‘.modal.in’).modal(‘hide’);

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

13# 部落用户 | 2019-08-31 10-32

这很好用


    
      $(function () {
   $(‘#modal’).modal(‘toggle’);
});
</code>


  
    但是，当你有多个模态叠加在一起时，它是无效的，所以相反，这是有效的
  

   
    
      data-dismiss=”modal”
</code>

14# v-star*위위 | 2019-08-31 10-32

我在这一个上面的五美分是我不想用id来定位自举模态并且看到因为一次只有一个模态应该足以移除模态，因为切换可能是危险的：


    
      $(‘.modal’).removeClass(‘show’);
</code>

15# 雪浴冰灵 | 2019-08-31 10-32


        
          <!DOCTYPE html>


  <span class="pln">Bootstrap Example</span>
  
  
  

  





  Modal Example

  
  

  
  
    

      
      
        
          
          Modal Header

        

        
          Some text in the modal.

        

        
          
        

      
</div>

16# 烏鴉喝酒 | 2019-08-31 10-32

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

$(“.ui-dialog-titlebar-close”).click();

17# Hey ou | 2019-08-31 10-32

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


    
      $(“#modal .close”).click()
</code>

18# 你咖喱人biss嗷 | 2019-08-31 10-32

放
modal(‘toggle’)
代替
modal(toggle)


    
      $(function () {
   $(‘#modal’).modal(‘toggle’);
});
</code>

19# 时间 | 2019-08-31 10-32


    
         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);
               }
           }
       });
   };
</code>