dialog box using jquery UI
 |
| dialog box using jquery UI |
use the below codes to create dialog box using jquery UI..
index.html
<html>
<head>
<title>jQuery UI Dialog</title>
<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>
<style>
#dialog{
display:none;
}
.ui-dialog{
background:#598cc0;
color:white;
border-radius:4px;
}
h2{
border-radius:5px;
margin-top:0px;
font-weight:bold;
background:black;
color:white;
}
#content{
width:600px;
margin:auto;
}
.ui-dialog-titlebar{
cursor:move;
}
.ui-button{
background:black;
color:white;
cursor:pointer;
float:right;
border:0px;
}
input[type=button]{
background:black;
color:white;
border-radius:4px;
cursor:pointer;
border:0px;
padding:5px;
}
</style>
<script>
$(document).ready(function(){
$('#popup').click(function(){
$( "#dialog" ).dialog();
$("#dialog").css("display", "inline");
});
});
</script>
</head>
<body>
<div id="content">
<h3>JQuery Dialog Box</h3>
<div id="dialog">
<h2>This is JQuery Dialog</h2>
<p>Welcome To CodeNair.com. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<input type="button" id="popup" value="Show Alert"/>
</div>
</body>
</html>
That's it Friends how to create dialog box using jquery UI..
Thank You for Reading...
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.