How to properly show a pop up dialog using html/jQuery UI
Question
With this code I want to show a jQuery UI dialog when I click on a button. 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:
<!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:
//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
#helpdialog {
display: none;
}
3 answers
solution1
1 ACCPTED 2015-09-13 13:13:32
Did you load UI jQuery JS and 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/
edit:
For not showing dialog box when site is loading put to your CSS file code:
#helpdialog {
display: none;
}
or add to <head> section if you don't have external CSS.
<style>
#helpdialog {
display: none;
}
</style>
solution2
0 2015-09-13 13:33:59
First include jquery as well. 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. Here's the code (keep your myJsFile.js intact):
<!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>
solution3
0 2015-09-13 13:34:21
You also need to include jquery main library. The required includes are jquery library, jquery ui js, and 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.