css - 在移动浏览器上隐藏 JqueryUI 对话框窗口

Question

我有一个在页面加载时打开的 jqueryUI 对话框窗口。非常简单，非常容易:

<script>
$(function() {
  $( "#dialog-modal" ).dialog({
    dialogClass: 'fixed-dialog',
    resizable: false,
    width: 580,
    top: 200,
    modal: true
  });
});
</script>

<div class="dialog-wrapper"></div>

<script>
$('.dialog-wrapper')
  .html('<div id="dialog-modal" class="dialog-right bigdialog"    title="Click to close"><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=YNQGF43QJK2VG" target="_blank"><img class="overlay-image" src="/images/digger-24k-anim.gif"></a></div>');
</script>

问题是，我想在移动浏览器上隐藏它，但它根本不起作用。任何尝试使用 css 媒体查询来显示:在某些显示器分辨率上没有被拾取，因为 jquery-ui 上的元素样式是显示: block ；

还有其他方法可以实现吗？

Answer 1

检查屏幕尺寸。如果小于最小尺寸，则跳过对话框。

if($(window).height() >= miniumHeight && $(window).width() >= minimumWidth) {
    /*Show Dialog Box*/
} else {
    /*Do Something Else*/
}

另一种方式是 css visibility: hidden;