关闭Bootstrap模态

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

 

     

        ×
        
Error:
        
        

        
Please correct the following errors:
        
     
 

模态最初显示,但在模态外部单击时不会关闭.此外,内容区域不会显示为灰色..如何让模式最初显示,然后在用户点击区域外关闭？如何在演示中将背景变为灰色？

将modal('toggle')代替modal(toggle)

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

要关闭bootstrap 模态,你可以将'hide'作为选项传递给模态方法,如下所示

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

请看看这里的工作小提琴

bootstrap还提供了可以挂钩到模态功能的事件,比如如果要在模式完成对用户隐藏时触发事件,可以使用hidden.bs.modal事件,您可以在此处阅读有关模态方法和事件的更多信息.文档

如果上述方法都不起作用,请为关闭按钮指定一个id并触发单击关闭按钮.

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

要么

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

应该管用.

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

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

这对我有用:

cancel

使用此链接模式关闭

$("#your-modal-id").modal('hide');

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

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

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

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

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

尝试这个

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

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

data-dismiss="modal"

并不是

data-dissmiss="modal"

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

  
  
  

  





  
Modal Example
  
  Open Modal

  
  

    

    
      
      

        

          ×
          
Modal Header
        
        

          
Some text in the modal.
        
        

          Close
        
      
      
    
  
  

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

Close

 // 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.

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