我有一个引导模式对话框,我想首先显示,然后当用户在页面上单击时,它就消失了。我有以下几点:

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

模态最初会显示,但在模态之外单击时不会关闭。此外,内容区域没有灰色。我怎么能得到模态显示最初,然后关闭后,用户点击区域外?我怎么能得到背景是灰色的演示?


当前回答

经过一些测试,我发现对于引导模式,在执行$(.modal).modal('show')后执行$(.modal).modal('hide')之前需要等待一段时间。我发现在我的情况下,我需要在两者之间至少500毫秒的间隔。 这是我的测试用例和解决方案:

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

其他回答

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

or

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

应该工作。

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

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

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

$(function () {
   $('#modal').modal('toggle');
});
   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);
               }
           }
       });
   };

有时解决方案不工作,所以你必须正确地删除类,并手动添加CSS display:none。

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

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

data-dismiss="modal"

而不是

data-dissmiss="modal"

注意第二个例子中的两个“ss”,它将导致关闭按钮失败。