CODEWITHSUNDEEP
jqueryjquery-uidialogmodal-dialog
bernie2436
bernie2436

Reputation: 23901

how can i get rid of the close button on a jquery modal dialog box

I want to have a jquery modal dialog that will have one button that will say "yes" and close the dialog. Is there any way to hide/turn off the default "Close" button or should I use another jquery element like a pop up panel? This code adds the yes button but does not turn off the close button: 

$(document).ready(function(){
    $("#dialog-message").dialog({
        modal:true,
        buttons: {
        "Yes": function() {
          $( this ).dialog( "close" );
        },
    }
    });

});

Upvotes: 2

Views: 628

Answers (3)

j08691
j08691

Reputation: 207861

Add a CSS rule:

.ui-dialog-titlebar-close {
    display:none;
}

jsFiddle example

Upvotes: 1

Yotam Omer
Yotam Omer

Reputation: 15356

You can hide it using CSS:

.ui-dialog-titlebar-close { display: none;}

or you can init the dialog like this:

$("#dialog-message").dialog({
    modal:true,
    buttons: {
        "Yes": function() {
            $( this ).dialog( "close" );
        }
    }
}).dialog("widget").find(".ui-dialog-titlebar-close").hide(); // find and hide the button right after creating the modal

Also, IE doesn't like the comma after the last property of an object so remove it.

Upvotes: 3

Richard
Richard

Reputation: 6344

CSS

.ui-dialog-titlebar-close { display: none;}

jQuery:

$(".ui-dialog-titlebar-close").remove();

Just whatever you have to do to grab the item with the class "ui-dialog-titlebar-close"

Upvotes: 1

Related Questions