jquery - 如何将jquery对话框中的 'X'按钮更改为读取 'Close'

Question

我在 MVC Razor View 中有一个 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>');
    }
})

希望这有帮助!