How to replace dialog header in jQuery UI?

Question

I want to remove dialog header in jQuery UI and add my close button. Close button is image, when user click image, dialog'll be closed. This my snippet:

$("#dialog-model").dialog({
    create: function (event, ui) {
        jQuery(".ui-dialog-titlebar").hide();
        $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
    },
    height: 500,
    width: 900,
    modal: true,

});

I try to add image in scipt but it doesn't work

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

UPDATE ANSWER

Try this one? DEMO http://jsfiddle.net/yeyene/GnpQ8/2/

Create a custom close button.

$(document).ready(function(){
    $("#dialog-model").dialog({
        create: function (event, ui) {
            $('.ui-dialog-titlebar').css({'background':'none','border':'none'});
            $(".ui-dialog-titlebar").html('<a href="#" role="button"><span class="myCloseIcon">close</span></a>');
            $("#dialog-model").css({ 'font-family': 'Helvetica', 'padding': '0', 'font-size': '12px' });
        },
        width: 250,
        height: 150,       
        modal: true,
        resizable: false
    });
    
    $("span.myCloseIcon").click(function() {
        $( "#dialog-model" ).dialog( "close" );
    });
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 17, 2013 at 2:18

yeyene

7,4001 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nathan Nguyễn Over a year ago

Thanks for your answer, I need to add image and press image, dialog will close. I can do it with HMTL, but image is problem

yeyene Over a year ago

check my update answer and demo, you can create a custom close btn, see my example.

Collectives™ on Stack Overflow

How to replace dialog header in jQuery UI?

1 Answer 1

UPDATE ANSWER

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

UPDATE ANSWER

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related