bug：移动端弹出bootstrap模态框时，禁止body上下滚动

1、存在问题：
   点下面图一的视频轮播，弹出bootstrap模态框如图二，滚动鼠标时，模态框遮罩下面的body也随着上下滚动的问题


                          图一


                    图二

2、解决办法：

html：

<!-- Swiper:视频 -->
<div class="vedio">
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide" data-toggle="modal" data-target="#myModal">
                <img src="../../../images/unicom5gpage/icon_play.png" class="icon_play">
                <img src="../../../images/unicom5gpage/vedio.jpg">
            </div>
            <div class="swiper-slide" data-toggle="modal" data-target="#myModal">
                <img src="../../../images/unicom5gpage/icon_play.png" class="icon_play">
                <img src="../../../images/unicom5gpage/vedio.jpg">
            </div>
            <div class="swiper-slide" data-toggle="modal" data-target="#myModal">
                <img src="../../../images/unicom5gpage/icon_play.png" class="icon_play">
                <img src="../../../images/unicom5gpage/vedio.jpg">
            </div>
            <div class="swiper-slide" data-toggle="modal" data-target="#myModal">
                <img src="../../../images/unicom5gpage/icon_play.png" class="icon_play">
                <img src="../../../images/unicom5gpage/vedio.jpg">
            </div>
        </div>

        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>
<!-- Swiper:视频 end-->

样式css：

.ban_body {
  height: 100%;
  overflow: hidden;
}

    //bug解决:bug：弹出模态框时，禁止body上下滚动滑动 
    $(document).on("click",".vedio .swiper-slide", function () {
        $("html,body").addClass("ban_body")
    })
    $(document).on("click",".modal-header .close", function () {
        $("html,body").removeClass("ban_body")
    })