• admin
• June 21, 2024
• No Comments

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.

    Hello World  Popup
    
    
    
    
        function Show() {

            $("#dialog:ui-dialog").dialog("destroy");

            $("#dialog-modal").dialog({
                height: 300,
                width: 200,
                modal: true
            });
        }
    


    
        Hello World Juqry UI popup
    
    

Let’s run that in browser. Now you can see if you run this browser it will look like below.

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