Bootstrap之modal关闭,但遮罩层无法隐藏

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/w926498/article/details/82114253

点击如下modal中的按钮时,modal可以正常关闭。

  <button v-if="flag == 'update' " data-dismiss="modal" class="btn btn-success btn-sm"
               @click="updateMainProjectSubmit()">修改
  </button>

因为想在点击按钮后执行判断,判断成立才关闭modal,否则不关。就将按钮的data-dismiss="modal"属性去掉,如下代码所示。

<button v-if="flag == 'update' "  class="btn btn-success btn-sm"
            @click="updateMainProjectSubmit()">修改
</button>

并在按钮的click方法updateMainProjectSubmit中,在符合判断要求时,手动将modal关闭。

 $('#nowMainProjectDataForm').modal('hide');//隐藏modal

这时问题就来了,modal是关闭了,但遮罩层未隐藏,造成无法点击页面进行后续操作的后果。
从图1中可以看到,元素中还有三个modal-backdrop的div 

图1​​​​​​

最后添加代码 $('.modal-backdrop').remove(); 去掉遮罩层,问题解决
如下:

  $('#nowMainProjectDataForm').modal('hide');//隐藏modal
  $('.modal-backdrop').remove();//去掉遮罩层

总结:将modal hide并不能隐藏遮罩层,还应手动将遮罩层去掉。这样才能替代 data-dismiss="modal" 属性

展开阅读全文

没有更多推荐了,返回首页