jQuery UI is a great open source set of user controls and it’s very easy to use. Recently one of my friend asked question that how we can hide title bar in jQuery UI Dialog? so this post is a reply to him. Let’s create a simple html and use jQuery Ui modal dialog. Following is a code for that.
Here in the above code you can see I have create a hello world pop up with asp.net jQuery CDN.
Let’s run that in browser. Now you can see if you run this browser it will look like below.
That’s it. It’s very easy. Hope you like it. Stay tuned for more..
Here in the above code you can see I have create a hello world pop up with asp.net jQuery CDN.
<html>
<head>
<title>Hello World Popup</title>
<link type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css"
rel="stylesheet" />
<script language="javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript">
function Show() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-modal").dialog({
height: 300,
width: 200,
modal: true
});
}
</script>
</head>
<body>
<div id="dialog-modal" title="Hello Word" style="display: none">
Hello World Juqry UI popup
</div>
<input type="button" onclick="javascript: Show()" value="click me" />
</body>
</html>
Let’s run that in browser. Now you can see if you run this browser it will look like below.
Hiding jQuery UI Dialog Title Bar:
Now If we wnat to hide dialog box then we just have add one more thing extra in show function in above code to hide Hello Word Title bar with close icon.function Show() {
$("#dialog:ui-dialog").dialog("destroy");
$("#dialog-modal").dialog({
height: 300,
width: 200,
modal: true
});
$(".ui-dialog-titlebar").hide();
}
So in the above code you can see I have written ‘$(".ui-dialog-titlebar").hide();’ . Now you run that in browser it will look like below.
That’s it. It’s very easy. Hope you like it. Stay tuned for more..
nice artical.... thanks
ReplyDeleteThanks for kind words.
Delete