Sample popup window using jQuery UI Dialog


In this article, I will explain how to display popup window using jQuery UI Dialog. jQuery is the javascript library used to reduce many lines of javascript code. Using jquery ui by the adding the external script "jquery-1.9.1.js" and "jquery-1.9.1.js" files from webserver.

Sample popup window using jQuery UI Dialog




In this article, I will explain how to display popup window using jQuery UI Dialog. jQuery is the javascript library used to reduce many lines of javascript code. Using jquery ui by the adding the external script jquery-1.9.1.js and jquery-1.9.1.js files from webserver and also external stylesheet "jquery-ui.css" from the webserver.


Full code as follows

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sample popup window using jQuery UI Dialog</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>

<div id="dialog" title="Basic dialog">
<p>Sample dialog which is used to display data. This popup window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>



I had attached sample file for reference.


Attachments

  • Sample popup window using jQuery UI Dialog (45043-34632-Sample-popup-window-using-jQuery-UI-Dialog.html)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: