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 : http://jqueryui.com/download

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

<html>
<head>
<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”>

jQuery(document).ready(function(){

jQuery(‘#dialogg’).dialog({
autoOpen: false,
title:’This is my custom dialog’,
width: 300,
hide: “slide”,
modal: true,
show: ‘slide’,
buttons: {
“Ok”: function() {
$(this).dialog(“close”);
},
“Cancel”: function() {
$(this).dialog(“close”);
}
},

});

jQuery(‘#popup’).click(function(){
jQuery(‘#dialogg’).dialog(‘open’);
jQuery(‘#dialogg’).html(‘My name is Ziyed’);
});

});

</script>
<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;}
</style>
</head>
<body>

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

</body>
</html>

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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