如何更改jQuery对话框中的“ X”按钮以读取“关闭”

Question

我在MVC剃刀视图中有一个jquery对话框，其中有一个关闭按钮。但是在单击关闭按钮时，对话框只是被隐藏而不是被删除，因此，当单击页面上的任何链接时，该对话框不起作用，这是不希望的。否，我每次关闭对话框时都想重定向到我的操作方法。

单击对话框标题上的“ X”按钮，我得到的正是我想要的。因此，我的上级现在要我完全删除“关闭”按钮，并在标题中写上“关闭”而不是“ X”。我设法通过chrome浏览器控制台编辑对话框，删除了对话框标题使用的许多CSS类。但是我无法弄清楚在哪里可以更改项目中的代码（CSS或jquery）以实现这一目标！请给我关于对话框的启发！

这是我的对话框：

$(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

您可以将上面 jQuery 代码的对话框部分修改为：

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

希望这可以帮助！