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

您可以通过JS获取媒体屏幕，现在，如果您的屏幕超过某个尺寸或

，则可以调用show modal

Answer 2

黑色背景是因为模态内容被隐藏，但是模态被触发，正如我看到的那样，您在modal('show')函数中编写了document.ready。

准备好文档，检查设备是否可移动，然后触发modal('show')。

<script type="text/javascript">
        $(document).ready(function(){
            if (typeof window.orientation === 'undefined') {  // to check device is mobile/browser
                 $("#myModal").modal('show');
            }
        });
</script>

因此，如果设备是移动设备，则不会触发模态。

或使用CSS

@media screen and (max-width: 600px) {
  .money, .modal-backdrop {
      display: none !important;
    }
}

提琴-https://jsfiddle.net/skdroid/mp4gt102/5/

Answer 3

您的CSS中包含以下部分：

    @media screen and (max-width: 600px) {   
      .money{ //note, its a class value
         display: none;
       }
}

您知道CSS遵循“点”系统（因此CSS文件知道要覆盖的内容）。

但是您在脚本中说过：

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

我们知道：id> class的值。因此，在加载文档时，它会告诉您的文档显示模式，但是由于它是ID与类，因此它将覆盖类CSS值。

参考点系统及其工作原理： Points in CSS specificity

解决方案：

您可以（如评论部分所述）在文件中放置以下内容：

<script type="text/javascript">
    $(window).on('load resize', function() {
    if ($(window).width() > 600px){
       $("#myModal").modal('show');
    } else {
       $("#myModal").modal('hide');
     }
});
</script>

Answer 4

在脚本中使用以下代码。低于600分辨率不会显示弹出窗口

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

Answer 5

使用此代码隐藏在移动视图中

<fa-icon style="font-size: 2rem;" [icon]="['fab', 'facebook-f']"></fa-icon>

无法在移动视图中隐藏div

5 个答案: