Question

是否可以打开没有标题栏的jQuery UI对话框？

Answer 1

我认为最好的解决方案是使用选项dialogClass。

来自jquery UI docs的摘录：

在init期间：$('.selector').dialog({ dialogClass: 'noTitleStuff' });

或者如果你想在init之后。：

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

所以我创建了一个带有选项dialogClass ='noTitleStuff'和css的对话框：

.noTitleStuff .ui-dialog-titlebar {display:none}

太简单了!!但我花了一天的时间来思考为什么我以前的id-＆gt;类钻孔方法不起作用。事实上当你调用.dialog()方法时，你变换的div变成了另一个div（真正的对话框div）的孩子，可能是titlebar div的'兄弟'，所以很难找到后者从前者开始。

Answer 2

我找到了动态删除标题栏的修复方法。

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

在渲染对话框后，这将删除所有带有'ui-dialog-titlebar'类的元素。

Answer 3

我相信你可以用CSS隐藏它：

.ui-dialog-titlebar {
    display: none;
}

或者，您可以使用dialogClass选项将其应用于特定对话框：

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});

.no-titlebar .ui-dialog-titlebar {
    display: none;
}

查看“Theming”对话框。上述建议使用了dialogClass选项，该选项似乎位于it's way out上，支持新方法。

Answer 4

我在我的项目中使用它

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Answer 5

这对我有用：

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Answer 6

尝试使用

$("#mydialog").closest(".ui-dialog-titlebar").hide();

这将隐藏所有对话标题

$(".ui-dialog-titlebar").hide();

Answer 7

实际上还有另一种方法，直接使用对话框widget：

你可以得到Dialog Widget

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

然后再做

$dlgWidget.find(".ui-dialog-titlebar").hide();

仅隐藏该对话框中的titlebar

并在一行代码中（我喜欢链接）：

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

无需以这种方式向对话框添加额外的类，只需直接进行操作即可。对我来说工作很好。

Answer 8

我发现使用 open 事件更有效，更易读，并从那里隐藏标题栏。我不喜欢使用页面全局类名搜索。

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

简单。

Answer 9

我喜欢覆盖jQuery小部件。

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

因此，您现在可以设置是否要显示标题栏

   $('#mydialog').dialog({
      headerVisible: false // or true
});

Answer 10

初始化对话框后，可以在使用dialogClass后使用jquery隐藏标题栏。

在init期间：

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

通过使用此方法，您无需更改css文件，这也是动态的。

Answer 11

如果您有多个对话框，可以使用：

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

Answer 12

这是最简单的方法，它只会删除该特定对话框中的标题栏;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

Answer 13

我在隐藏Dialog标题栏时发现的一件事是，即使显示为无，屏幕阅读器仍然会将其读取并将其读取。如果您已经添加了自己的标题栏，则会同时读取这两个标题栏，从而导致混淆。

我所做的是使用$(selector).remove()将其从DOM中删除。现在，屏幕阅读器（以及其他所有人）都不会看到它，因为它不再存在。

Answer 14

试试这个

$("#ui-dialog-title-divid").parent().hide();

将divid替换为相应的id

Answer 15

我认为最干净的方法是创建一个新的myDialog小部件，其中包含对话框小部件减去标题条形码。删除标题条形码看起来很简单。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Answer 16

这对我来说隐藏了对话框标题栏：

$(".ui-dialog-titlebar" ).css("display", "none" );

Answer 17

这是怎么做的。

转到主题文件夹 - ＆gt;基 - ＆GT;打开jquery.ui.dialog.css

查找

关注

如果您不想显示titleBar，那么只需设置display：none，就像我在下面所做的那样。

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Samilarly也是如此。

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

现在关闭按钮你也可以设置为无或你可以设置它

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;

   display:none;

}

我做了很多搜索，但没有什么，然后我在脑海里得到了这个想法。但是这会影响整个应用程序没有关闭按钮，对话框的标题栏，但你也可以通过使用jquery并通过jquery添加和设置css来克服这个问题

这是

的语法

$(".specificclass").css({display:normal})

Answer 18

对我来说，我仍然想要使用重新调整大小的角落，只是不想这样看到对角线。我用了

$(".ui-resizable-handle").css("opacity","0");

刚才意识到我正在评论错误的问题。辜负我的同名：（

Answer 19

您是否尝试过jQuery UI文档中的解决方案？ https://api.jqueryui.com/dialog/#method-open

正如您所说的，您可以这样做...

在CSS中：

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

在JS中：

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

Answer 20

这对我有用

 open: function(event, ui) {
            $(".ui-dialog-titlebar", $(this).parent())
              .hide();

完整

$speedbump.dialog({
  dialogClass: 'speedbump-container',
  autoOpen: false,
  closeOnEscape: false,
  modal: true,
  resizable: false,
  draggable: false,
  create: function () {        
      $speedbump
        .closest('.ui-dialog')
        .attr('id', 'speedbump-container');
  },
  open: function(event, ui) {
    $(".ui-dialog-titlebar", $(this).parent())
      .hide();
}

Answer 21

您可以使用带有上述技术的关闭图标删除栏，然后自行添加关闭图标。

CSS：

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML：

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

//将此div附加到包含您内容的div

JS：

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });

Answer 22

转到你的jquery-ui.js（在我的例子中是jquery-ui-1.10.3.custom.js）并搜索this._createTitlebar（）;并评论它。

现在你的任何人都会出现标题。如果要自定义标题，只需转到_createTitlebar（）;并编辑里面的代码。

通过

jquery UI对话框：如何在没有标题栏的情况下初始化？

22 个答案: