jQuery的UI对话框：如何初始化没有标题栏？

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

Answer 1

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

jquery UI文档摘录：

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

或者如果你想在初始化后。 ：

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

所以我创build了一个对话框，选项dialogClass ='noTitleStuff'和CSS这样的：

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

太简单 ！！ 但我花了1天的时间去思考为什么我以前的id-> class钻孔方法不起作用。 事实上，当你调用.dialog()方法时，你转换的div变成了另一个div（真正的对话框div）的子元素，可能还是titlebar div的“兄弟”，所以很难从前者开始寻找后者。

Answer 2

我想出了一个修复dynamic删除标题栏。

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

这将在对话框呈现后删除类“ui-dialog-titlebar”的所有元素。

Answer 3

我在我的项目中使用这个

 $("#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 4

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

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

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

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

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

检查“ 主题 ”对话框。 上面的build议使用了dialogClass选项，该选项似乎已经出来，以支持新的方法。

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 ：

这样你就可以获得对话框控件了

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

然后呢

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

只在该对话框中隐藏titlebar

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

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

这样就不需要在对话框中添加额外的类，只需直接点击即可。 对我来说工作很好。

Answer 8

我发现它更有效率，更可读性，使用打开的事件，并从那里隐藏标题栏。 我不喜欢使用页面全局类名search。

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

简单。

Answer 9

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

初始化期间：

 $('.selector').dialog({ dialogClass: 'yourclassname' }); $('.yourclassname div.ui-dialog-titlebar').hide(); 

通过使用这种方法，你不需要改变你的CSS文件，这也是dynamic的。

Answer 10

我喜欢重写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 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

隐藏对话框标题栏时发现的一件事就是，即使不显示，屏幕阅读器仍会将其读取。 如果您已经添加了自己的标题栏，则会同时读取，导致混淆。

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

Answer 14

尝试这个

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

用相应的idreplacedivid

Answer 15

我认为最简单的方法是创build一个新的myDialog小部件，由对话框小部件组成，不包括标题栏。 删除标题条码看起来很简单。

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

Answer 16

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

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

Answer 17

这是如何做到的。

转到主题文件夹 – >基地 – >打开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; } 

现在closuresbutton，你也可以设置它没有或者你可以设置它

 .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; } 

我做了很多的search，但没有什么，然后我在脑海里有这个想法。 但是，这将影响整个应用程序没有closuresbutton，对话框的标题栏，但你可以克服这一点，以及通过使用jQuery和通过jQuery添加和设置CSS

这是这个语法

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

Answer 18

这下一个表格解决了我的问题。

 $('#btnShow').click(function() { $("#basicModal").dialog({ modal: true, height: 300, width: 400, create: function() { $(".ui-dialog").find(".ui-dialog-titlebar").css({ 'background-image': 'none', 'background-color': 'white', 'border': 'none' }); } }); }); 

 #basicModal { display: none; } 

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" /> <div id="basicModal"> Here your HTML content </div> <button id="btnShow">Show me!</button> 

Answer 19

你可以使用上面描述的技术去除带有closures图标的酒吧，然后自己添加一个closures图标。

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 20

去你的jquery-ui.js（在我的例子中是jquery-ui-1.10.3.custom.js）并searchthis._createTitlebar（）; 并发表评论。

现在你的任何一个对话框都会显示标题。 如果你想自定义标题只需去_createTitlebar（）; 并编辑里面的代码。

通过