有没有可能打开一个jQuery UI对话框没有标题栏?
当前回答
我喜欢重写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
});
其他回答
这是如何做到的。
进入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来克服这个问题
这是它的语法
$(".specificclass").css({display:normal})
这是最简单的方法,它只会删除一个特定对话框中的标题栏;
$('.dialog_selector').find('.ui-dialog-titlebar').hide();
对我来说,我仍然想使用重新调整大小的角,只是不想看到对角线。我使用
$(".ui-resizable-handle").css("opacity","0");
我刚意识到我回答错问题了。不辜负我的名字:(
我发现使用open事件并从那里隐藏标题栏更有效,更可读。我不喜欢使用页全局类名搜索。
open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }
简单。
您可以使用上述技术删除带有关闭图标的栏,然后自己添加一个关闭图标。
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中的所有活动ajax请求
- 在$.ajax()中将数组传递给ajax请求
- JavaScript数据网格数百万行
- 我可以在JavaScript中获得当前运行函数的名称吗?
- 使用jQuery选择多个类
- 如何创建一个jQuery函数(一个新的jQuery方法或插件)?
- jQuery -添加额外的参数提交(不是ajax)
- 如何清除所有<div>的内容在一个父<div>?
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 使用jQuery获取第二个孩子
- .append(), prepend(), .after()和.before()
- 如何将JavaScript文件链接到HTML文件?
- jQuery的窗口大小调整
- 找到jQuery中所有未选中的复选框