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

点击如下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" 属性

• « 上一篇：编程范式 —— 函数式编程入门
• » 下一篇：Ubuntu安装TIM（QQ）