jquery UI对话框:如何初始化没有标题栏?

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

203936 次浏览
小开

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

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

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

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

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

查看对话框“主题”。上面的建议使用了dialogClass选项，该选项似乎在这是出路上，有利于一个新方法。

小开
最佳答案

我想出了一个动态删除标题栏的解决方案。

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

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

小开

我认为最好的解决方案是使用选项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，可能是titlebar div的“兄弟”，所以从前者开始寻找后者是非常困难的。

小开

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

init期间:

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


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

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

小开

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

您可以这样获得对话框小部件

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

然后做

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

将titlebar隐藏在对话框中

并且在一行代码中(我喜欢链接):

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

不需要在对话框中添加一个额外的类，直接就可以了。对我来说没问题。

小开

试试这个

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

将divid替换为相应的id

小开

我在我的项目中使用这个

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

这招对我很管用:

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

当隐藏Dialog标题栏时，我发现，即使display为none，屏幕阅读器仍然会读取它。如果您已经添加了自己的标题栏，它将同时显示这两种内容，从而造成混淆。

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

小开

我认为最简洁的方法是创建一个新的myDialog小部件，由对话框小部件减去标题条形码组成。删除标题条形码看起来很简单。

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

小开

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

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

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

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

简单。

小开

我喜欢重写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
});
小开

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

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

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

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');
});
小开

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

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

通过

小开

试着用

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

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

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

这是如何做到的。

进入themes文件夹> base >打开jquery.ui.dialog.css

找到

追随者

如果你不想显示标题栏，那么只需设置display:none，就像我在下面所做的那样。

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

头衔也是如此。

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

现在是关闭按钮你也可以设置它为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和添加和设置css通过jquery

来克服这一点

这是它的语法

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

如果你有多个对话框，你可以使用这个:

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

下一种形式解决了我的问题。

. 
$('#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>

小开

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

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

我刚意识到我回答错问题了。不辜负我的名字:(

小开
你尝试过jQuery UI文档的解决方案吗? https://api.jqueryui.com/dialog/#method-open < / p >

正如它所说，你可以这样做……

在CSS中:

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

JS:

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

这对我很有效

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

提交答案