有没有可能打开一个jQuery UI对话框没有标题栏?


当前回答

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

jquery UI文档的一个摘录:

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

或者在init之后。:

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

所以我创建了一些对话框选项dialogClass='noTitleStuff'和css像这样:

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

太简单了!!但是我花了1天的时间来思考为什么我之前的id->类钻井方法不起作用。事实上,当你调用.dialog()方法时,你转换的div成为另一个div(真正的对话框div)的孩子,可能是标题栏div的“兄弟”,所以很难尝试从前者开始寻找后者。

其他回答

这对我很有效

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

Full

$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();
}

转到你的jquery-ui.js(在我的情况下是jquery-ui-1.10.3.custom.js)并搜索this._createTitlebar();并对其进行注释。

现在你的任何一个对话框都会显示标题。如果你想自定义标题,只需去_createTitlebar();并编辑其中的代码。

by

试着用

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

这将隐藏所有对话框的标题

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

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

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

或者,你可以使用dialogClass选项将其应用于特定的对话框:

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

看看“主题化”对话。上面的建议使用了dialogClass选项,该选项似乎正在被一种新的方法取代。

这对我隐藏对话框标题栏有用:

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