如何使用html / jQuery UI正确显示弹出对话框
[英]How to properly show a pop up dialog using html/jQuery UI
问题描述
With this code I want to show a jQuery UI dialog when I click on a button. 
有了这段代码，我想在单击按钮时显示一个jQuery UI对话框。 However, the text of the dialog is shown for a brief time when the page loads. 但是，页面加载时，对话框的文本会短暂显示。 What is the right way to implement this? 什么是实现此目标的正确方法？ My html: 我的html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
.. html code ..
<button id="helpbutton" title="">Help</button>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will be visible for a short time when the page loads</p>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
</body>
</html>
as you can see, I call my external scripts just before the end of the for performance reasons. 如您所见，出于性能原因，我刚好在结束之前调用了外部脚本。
myJsFile.js: myJsFile.js：
//Fire up the help dialog when the help button is pressed
jQuery(function() {
jQuery( "#helpdialog" ).dialog({
autoOpen: false
});
jQuery( "#helpbutton" ).click(function() {
jQuery( "#helpdialog" ).dialog( "open" );
});
});
Solution (thanks to krzmig): Use this CSS code in the CSS file or in the section 解决方案 （由于krzmig）：在CSS文件或部分中使用此CSS代码
#helpdialog {
display: none;
}
3 个解决方案
解决方案1
1 已采纳 2015-09-13 13:13:32
Did you load UI jQuery JS and CSS? 您是否已加载UI jQuery JS和CSS？ Like in this example: 像这个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
source: https://jqueryui.com/dialog/ 来源： https : //jqueryui.com/dialog/
edit: 编辑：
For not showing dialog box when site is loading put to your CSS file code: 为了在网站加载时不显示对话框，请将您的CSS文件代码放入：
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS. 或如果没有外部CSS，则添加到<head>部分。
<style>
#helpdialog {
display: none;
}
</style>
解决方案2
0 2015-09-13 13:33:59
First include jquery as well. 首先还包括jquery 。 Second place your scripts before your dialog in html so that it loads and hides the dialog before it could show up itself on your page. 其次，将脚本放在html 对话框之前 ，以便在对话框可以显示在页面上之前加载和隐藏对话框 。 Here's the code (keep your myJsFile.js intact): 这是代码（保持myJsFile.js完整无缺）：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="helpbutton" title="">Help</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="myJsFile.js"></script>
<div id="helpdialog" title="Help dialog">
<p>Text in the dialog will NOT! be visible for a short time when the page loads</p>
</div>
</body>
</html>
解决方案3
0 2015-09-13 13:34:21
You also need to include jquery main library. 您还需要包括jquery主库。 The required includes are jquery library, jquery ui js, and jquery ui css. 所需的包括jquery库，jquery ui js和jquery ui css。
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script type="text/javascript" src="myJsFile.js"></script
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.