Bootstrap使用模态框modal遇到的相关问题

1、在关闭modal后，modal的幕布没有一同关闭消失，仍然存在，如图：


点开F12，可以看到这个modal幕布并没有随着modal消失
解决方法有两个：
a、在关闭modal的时候同时触发一个点击事件，直接把幕布去掉

<button type="submit" class="btn green" onclick="qingchu();">关闭</button>
<script type="text/javascript">
    function qingchu() {
        $('.modal-backdrop').remove();
    }
</script>
这里另一种写法：
<script type="text/javascript">
    $('body').on('hidden.bs.modal', '.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

b、直接刷新页面，简单粗暴，把幕布数据刷新没了

<script type="text/javascript">
    $('body').on('hidden.bs.modal', '.modal', function () {
        window.location.reload();
    });
</script>

2、在解决了幕布存在的问题后，这时候又遇到另外一个问题，及在打开第一个modal，然后关闭，出现第二次打不开modal的情况，这时候同理在F12查看代码下，可以看到页面代码已经在第一次加载后关闭modal下，仍然存在，只是是否可显示状态值被改为了none，这就会导致第二次点击modal打不开的情况

解决方法：
a、关闭modal后清除加载的modal数据

<script type="text/javascript">
    $('body').on('hidden.bs.modal', '.modal', function () {
        $(this).removeData("bs.modal");
        $(".modal-body").children().remove();
    });
</script>

b、关闭modal后刷新页面，就跟上面的一样，简单粗暴

<script type="text/javascript">
    $('body').on('hidden.bs.modal', '.modal', function () {
        window.location.reload();
    });
</script>