How to hide title bar in jQuery UI modal dialog?

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.
<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.

how to hide title bar in jquery UI modal popup

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.

how to hide jquery UI dialog box title bar Now hidden

That’s it. It’s very easy. Hope you like it. Stay tuned for more..

kick it on DotNetKicks.com

2 comments:

Your feedback is very important to me. Please provide your feedback via putting comments.