javascript - 无法在移动 View 中隐藏 div

Question

我已经为我的网站创建了一个弹出窗口，但我想为移动设备隐藏它。我做了如下隐藏它

    .modal-content{
      width: 440px;
    margin-left: 40px;
    margin-top: -15px;
    }
    .modal-header{
      height: 5px;
    }
    .peep{
      margin-top: -6px;
    }
    @media screen and (max-width: 600px) {


        
.money{
  display: none;
}

    }

当我这样做时它没有显示，但问题是浅色阴影如下图所示并且屏幕没有移动，没有滚动。

<script type="text/javascript">
    	$(document).ready(function(){
    		$("#myModal").modal('show');
    	});
    </script>

<div class="money">
    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="peep"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
                </div>
                <div class="modal-body">
    				<img  style="margin-left:-7.5px; margin-top:-10px;" src="assets\images\popup.jpg" alt="offer">
                </div>
            </div>
        </div>
    </div>
</div>

这是弹出窗口的完整代码。谁能告诉我它有什么问题吗？

Answer 1

在您的脚本中使用以下代码。 600以下分辨率不会弹窗

$(window).on('load resize', function() {
    if ($(window).width() > 600){   
        $("#myModal").modal('show');
    }   
});