How can I add custom html close button to body of jQuery Dialog?

Question

Similar Question: How to add my custom buttons with ids to a dialog-modal jquery object

I am curious if anybody knows how I can close my jQuery Dialog with a custom button that I have added to the .html body. Should I change the onClick value? to what? Perhaps Virtual Escape Key is an option. I don't want to use the title bar close or button pane close so that I can preserve my ongoing theme. Thanks!

Here is what I have:

<script>
$(function () {
    var $dialog = $('<div></div>')
    .html('')
    .dialog({
        autoOpen: false,
        modal: true,
        position: 'center',
        draggable: false,
                width:'40%';
    $(".ui-dialog-titlebar").hide()
    $("body").on('click', '#opener', function(e) {
        var param = $(this).attr('data-AttrRatingID');
    $dialog.html(param + "<br /><div id='modalClose' onclick='' class='formbtnshell' title='Close'><div class='formbtnwhtl'></div><div class='formbtnwhtr'></div><div class='formbtninside formbtninsidedelete'><div class='formbtntext'>Close</div></div></div>");
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
    });
});

Solution

Just assign a click event and close the dialog inside the event. Avoid using inline event handlers.

$(document).on('click', '#modalClose', function() {
   $(dialogSelector).dialog('close');
});

UPDATE

You have some issues the way you have created the fiddle. Never nest the events. It will bind the events multiple times which will not get you the desired effect.

You are attaching the event to id=opener $("body").on('click', '#opener',

But the id for the element is different when you are appending it

// Declare the initial dialog outside the Click event
var $dialog = $('#dialogg');

$dialog.dialog({
    autoOpen: false,
    modal: true,
    position: 'center',
    draggable: false,
    width: '40%',
    buttons: {
        "Close": function () {
            $(this).dialog("close")
        }
    }
});

// Append the HTML and open the dialog
$('input').click(function () {
    $dialog.html("<br /><a id='modalClose'>CloseMe</a>");
    $dialog.dialog('open');
});

// Bind the click event that closes the modal
$("body").on('click', '#modalClose', function (e) {
     // prevent the default action, e.g., following a link
     e.preventDefault();

     // Need to close the Modal
     $dialog.dialog('close');
});

Check Fiddle $dialog.html("
CloseMe");

Comments

[pepster]

Hi @Sushanth, Thank you for the quick reply! The button still appears to do nothing when it is clicked. I have tried adding your code in a few places. Is there a specific place it should be added?

[Sushanth --]

Can you show a small working sample on what you were trying ?

[pepster]

The line "$("body").on('click', '#opener', function(e){" opens the dialog from a button on the page, so I tried adding your bit within this 'on' call, and also I tried adding your bit outside of it but still within my script tags. Neither placement closed the dialog on click.

[Sushanth --]

It should be outside of where you attach the event to open. ALso check console for any errors in the browser

[pepster]

I have still had no luck. Is there something I need to do to find the button id control since it is outside of the original $dialog.html() declaration?

[Sushanth --]

Not required as you are accessing it using id .. Can you create a small fiddle

[pepster]

Here is a Fiddle (Ooops Had to update link). I am very new to jsFiddle, so I wasn't able to match my current functionality, but basically when the dialog is opened, I have a close button appearing, and I would like to use my own html button instead. Thank you so much!

[pepster]

Thank you for your help!

[Sushanth --]

@pepster.. Glad to have helped :)

[pepster]

It works Perfectly! Thank you so very much I really appreciate it!