logo标签列表

如何在jQuery UI对话框中移除关闭按钮？

jqueryhtmlcssjquery-uijquery-ui-dialog
809

如何在由jQuery UI创建的对话框上移除关闭按钮（位于右上角的X）？

13
查看文档，第一个子标题：http://api.jqueryui.com/dialog/ - Mike Cole
1
@MikeCole 文档是针对1.10版本的 - 我认为如果你想在任何更低的版本中隐藏关闭按钮，你需要做类似下面回答中提到的事情。 - Jarrett
1
在设置jQueryUI模态对话框时，请使用“ui-dialog-titlebar-close”：“display:none;”。 - MarcoZen
25个回答
1

因为我在应用程序的几个地方都发现了这个问题，所以我将其封装成了一个插件：

(function ($) {
   $.fn.dialogNoClose = function () {
      return this.each(function () {
         // hide the close button and prevent ESC key from closing
         $(this).closest(".ui-dialog").find(".ui-dialog-titlebar-close").hide();
         $(this).dialog("option", "closeOnEscape", false);
      });
   };
})(jQuery)

使用示例：

$("#dialog").dialog({ /* lots of options */ }).dialogNoClose();
0

使用这个纯CSS的代码行怎么样？ 我认为这是给定ID的对话框最清晰的解决方案：

.ui-dialog[aria-describedby="IdValueOfDialog"] .ui-dialog-titlebar-close { display: none; }
0
对于那些正在使用 DialogExtend jQuery Extension 的人，您可以使用 closable 选项来管理此功能以及许多其他调整，这个不错的扩展提供了很多功能。
请注意，如果您已经在使用 DialogExtend，任何上述的 Dialog CSS hack 将在初始化时被 DialogExtend 覆盖。
0

这是针对jQuery UI 1.12的。我为“classes”选项添加了以下配置设置

        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },

整个对话框初始化看起来像这样：

ConfirmarSiNo(titulo, texto, idPadre, fnCerrar) {
    const DATA_RETORNO = 'retval';
    $('confirmar-si-no').dialog({
        title: titulo,
        modal: true,
        classes: {
            'ui-dialog-titlebar-close': 'hidden',
        },
        appendTo: `#${idPadre}`,
        open: function fnOpen() { $(this).text(texto); },
        close: function fnClose() {
            let eligioSi = $(this).data(DATA_RETORNO) == true;
            setTimeout(function () { fnCerrar(eligioSi); }, 30);
        },
        buttons: {
            'Si, por favor': function si() { $(this).data(DATA_RETORNO, true); $(this).dialog("close"); },
            'No, gracias': function no() { $(this).data(DATA_RETORNO, false); $(this).dialog("close"); }
        }
    });
}

我使用以下脚本调用来显示它：
ConfirmarSiNo('Titulo',
              '¿Desea actualizar?',
              idModalPadre,
              (eligioSi) => {
                            if (eligioSi) {
                                this.$tarifa.val(tarifa.tarifa);
                                this.__ActualizarTarifa(tarifa);
                            }
                        });

在 HTML body 中，我有包含对话框的以下 div：

<div class="modal" id="confirmar-si-no" title="" aria-labelledby="confirmacion-label">
    mensaje
</div>

最终结果是：

enter image description here

'ConfirmarSiNo' 函数基于 'Whome' 在帖子 如何在Jquery UI对话框中实现“确认”对话框？ 中的回答。

-1

您可以使用以下代码删除关闭按钮。还有其他选项，您可能会发现有用。

$('#dialog-modal').dialog({
    //To hide the Close 'X' button
    "closeX": false,
    //To disable closing the pop up on escape
    "closeOnEscape": false,
    //To allow background scrolling
    "allowScrolling": true
    })
//To remove the whole title bar
.siblings('.ui-dialog-titlebar').remove();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接