Create popup is now so simple to build using jQuery UI Library

First u need to download the library of jQuery UI :

Download from here :

The code to manage your popup dialog lets see the example code:

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>My jQuery</title>

<link type=”text/css” href=”css/ui-lightness/jquery-ui-1.8.14.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.5.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.14.custom.min.js”></script>

<script type=”text/javascript”>


autoOpen: false,
title:’This is my custom dialog’,
width: 300,
hide: “slide”,
modal: true,
show: ‘slide’,
buttons: {
“Ok”: function() {
“Cancel”: function() {


jQuery(‘#dialogg’).html(‘My name is Ziyed’);


<style type=”text/css”>
/*demo page css*/
body{ font: 62.5% “Trebuchet MS”, sans-serif; margin: 50px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}

<button id=”popup”>Click Me</button>
<div id=”dialogg”></div>



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s