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

时间:2013-12-14 14:45:29

标签: css jquery-ui media-queries

我有一个在pageload打开的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>

问题是,我想在移动浏览器上隐藏它,但它根本不起作用。由于jquery-ui上的元素样式是display:block;

实现这一目标的其他任何方式?

1 个答案:

答案 0 :(得分:1)

检查屏幕大小。如果小于最小尺寸,请跳过对话框。

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

另一种方式是css visibility: hidden;