如何使用JQUERY生成媒体查询
[英]how to generate media queries with JQUERY
问题描述
I am trying to display a dialog box when users access a page with a device smaller than a desktop. 
当用户使用小于桌面的设备访问页面时，我试图显示一个对话框。 I am not an expert in jQuery. 我不是jQuery专家。 I tried the following below but was not successful. 我在下面尝试了以下方法，但未成功。
$(document).ready(function () {
if (window.matchMedia('(max-width: 767px)').matches) {
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
}).show();
} else {
$("ScreenSize").dialog().hide();
}
});
<div id="ScreenSize" style="display:none">
<p>Go to Text Box</p>
</div>
4 个解决方案
解决方案1
1 2017-05-24 10:46:08
This code is executed on Dom ready. 此代码在Dom准备就绪时执行。 Considering that you open that dialog only in the if branch, actually the else branch is useless because when you reload the page, it doesn't get opened at all. 考虑到您仅在if分支中打开该对话框，实际上else分支是无用的，因为当您重新加载页面时，根本不会打开它。 Or maybe there is some other logic that you are not providing. 也许您没有提供其他逻辑。
Then .dialog() is a method of the jQuery UI library. 然后.dialog（）是jQuery UI库的一种方法。 You should add also that library in order to get the dialog working. 您还应该添加该库，以使对话框正常工作。 If you open your console you see that the method dialog() is undefined. 如果打开控制台，则会看到方法dialog（）未定义。
解决方案2
1 2017-05-24 12:06:39
Your javascript code is OK. 您的JavaScript代码正常。 On the html part, jQuery and jQuery UI (for the dialog widget) scripts must be loaded in the correct order: jQuery first, UI after. 在html部分，必须以正确的顺序加载jQuery和jQuery UI（用于对话框小部件）脚本：首先是jQuery，然后是UI。 Try the following code snippet, it works as you wanted. 尝试以下代码片段，它可以根据需要运行。
$(document).ready(function () { if (window.matchMedia('(max-width: 767px)').matches) { var dialog = $("#ScreenSize").dialog({ modal: true, autoopen: true }).show(); } else { // this part is useless... $("ScreenSize").dialog().hide(); } });
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> </head> <body> <div id="ScreenSize" style="display:none"> <p>Go to Text Box</p> </div> </body> </html>
解决方案3
0 2017-05-24 10:52:01
Why is jQuery needed? 为什么需要jQuery？ Why not just use css media query to display and hide your dialog box. 为什么不只使用CSS媒体查询来显示和隐藏对话框。
CSS: CSS：
#ScreenSize {
display: none;
}
@media only screen and (max-width: 767px) {
#ScreenSize {
display: block;
}
}
解决方案4
0 2017-05-24 14:18:18
i have used these following below in order to find a solution to my problem 我在下面使用以下这些命令来找到解决我的问题的方法
$(function () {
if (screen.width < 1023) {
$("#ScreenSize").show();
var dialog = $("#ScreenSize").dialog({
modal: true,
autoopen: true,
resizable: false, draggable: false,
})
}
else {
$("#ScreenSize").hide();
}
});
<span class="ui-state-default ui-corner-all" style="float: left; margin: 0 7px 0 0;"><span class="ui-icon ui-icon-info" style="float: left;"></span></span>
<div style="margin-left: 23px;">
<p>go to Text Box</p>
</div>
<//div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.