有没有可能打开一个jQuery UI对话框没有标题栏?
当前回答
这是如何做到的。
进入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})
其他回答
您可以使用上述技术删除带有关闭图标的栏,然后自己添加一个关闭图标。
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文档的解决方案吗? https://api.jqueryui.com/dialog/#method-open
正如它所说,你可以这样做……
在CSS中:
.no-titlebar .ui-dialog-titlebar {
display: none;
}
在JS:
$( "#dialog" ).dialog({
dialogClass: "no-titlebar"
});
试试这个
$("#ui-dialog-title-divid").parent().hide();
将divid替换为相应的id
这是如何做到的。
进入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})
我喜欢重写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
});
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?