有没有可能打开一个jQuery UI对话框没有标题栏?
当前回答
您可以使用上述技术删除带有关闭图标的栏,然后自己添加一个关闭图标。
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在使用dialogClass后隐藏标题栏。
init期间:
$('.selector').dialog({
dialogClass: 'yourclassname'
});
$('.yourclassname div.ui-dialog-titlebar').hide();
通过使用这种方法,你不需要改变你的css文件,这也是动态的。
我认为最好的解决方案是使用选项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的“兄弟”,所以很难尝试从前者开始寻找后者。
如果你有多个对话框,你可以使用这个:
$("#the_dialog").dialog({
open: function(event, ui) {
//hide titlebar.
$(this).parent().children('.ui-dialog-titlebar').hide();
}
});
我认为最简洁的方法是创建一个新的myDialog小部件,由对话框小部件减去标题条形码组成。删除标题条形码看起来很简单。
https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js
我想出了一个动态删除标题栏的解决方案。
$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();
这将在对话框渲染后删除所有带有'ui-dialog-titlebar'类的元素。
推荐文章
- 用jQuery切换DIV背景图像
- 如何让一个按钮将我的页面重定向到另一个页面?
- 如何让元素被点击(对于整个文档)?
- 使用jQuery改变输入字段的类型
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 使用jQuery滚动到一个div
- 在JS/jQuery中触发按键/按键/按键事件?
- 如何每5秒重新加载页面?
- getJSON调用中的错误处理
- 如何用jquery或javascript排序对象数组
- 使用jQuery切换输入禁用属性
- 如何知道一个字符串开始/结束在jQuery特定的字符串?
- Twitter Bootstrap vs jQuery UI?