Question

I had a jquery dialog box in an MVC razor-view with a close button inside it. But on clicking the close button, the dialog just got hidden and not removed, so that when a click on any link on the page it doesnt work, which is not desired; noe do i want to redirect to my action method every time i close the dialog.

On clicking the ‘X’ button on the dialog-header, i get exactly what i want. So my senior now wants me to completely remove the ‘Close’ button and write “close” instead of ‘X’ in the header. I managed to do it editing my dialogbox thru my chrome browser console, on removing a whole lot of CSS class that the dialog-header uses.
But i cannot figure out fwhere to change the code(CSS or jquery) in my project in order to make this happen!! Please enlighten me about dialogboxes!!

here is my dialogbox:

$(function () {

        $.ajaxSetup({ cache: false });
        $(".ExportStatus").live("click", function (e) {

            e.preventDefault();
            var height = 350, width = 370;  //height = 350 width = 345; 
            $('<div><span class="well"  style="position: absolute; top: 85px; left: 70px"><img src="' + loaderimagePath + '" alt="Processing your request. Please wait..." /></span></div>')
            .addClass("dialog")
            .attr("id", $(this).attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                //                    open: function () {
                //                        $(".ui-dialog-titlebar-close").val() = closebutton;
                //                    },
                title: $(this).attr("data-dialog-title"),
                closeOnEscape: true,
                resizable: false,
                //                    close: $(this).attr("data-dialog-titlebar-close"),         
                //                      $("data-dialog-title-close").live("click", 
                //                    function () {
                //                        $(".ui-dialog").hide();
                //                        $(".ui-widget-overlay").hide();
                //                    },                       
                //window.setTimeout('location.reload()', 0);   $(this).remove()
                buttons: {
                    "Close": function () {
                        e.preventDefault();
                        $(".ui-dialog").remove();
                        $(".ui-widget-overlay").remove();
                        // $(" #quickfillDialog").dialog("hide");

                        return false;
                    }


                },![enter image description here][1]
                modal: true,
                position: 'middle',
                width: width,
                height: height
            })

            // $(".ui-dialog-titlebar-close").click( function() {
            // $(this).parent().children().children("a.ui-dialog-titlebar-close").remove();
            .load(this.href, function (response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $('.dialog').html(msg + xhr.status + "<br/>" + xhr.statusText + "<br/>" + xhr.responseText);
                }
            });
        });

Answer 1

You can modify the dialog part of the jQuery code above as:

.dialog({
    open: function(event, ui) {
        $('.ui-dialog-titlebar-close')
            .removeClass("ui-dialog-titlebar-close")
            .html('<span style="float:right;">Close</span>');
    }
})

Hope this helps!