How to change the "X" button in the jquery dialog to read "Close",

Question

I had a jquery dialog in the form of an MVC razor with a closed button inside it. But by clicking the close button, the dialog box just got hidden and not deleted , so when you click on any link on the page it does not work, which is undesirable; noe I want to redirect to my action method every time I close the dialog.

When I click the "X" button in the title bar of the dialog, I get exactly what I want. So my elder now wants me to completely remove the Close button and write "close" instead of "X" in the header. I managed to do this by editing my dialog through my Chrome browser console, removing the entire CSS class that uses the dialog title. But I can't figure out how to change the code (CSS or jquery) in my project for this to happen! Please invest in a dialog box!

here is my dialogue:

$(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 change part of the jQuery code dialog above:

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

Hope this helps!