有没有可能打开一个jQuery UI对话框没有标题栏?
当前回答
这对我很有效
open: function(event, ui) {
$(".ui-dialog-titlebar", $(this).parent())
.hide();
Full
$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();
}
其他回答
您可以使用上述技术删除带有关闭图标的栏,然后自己添加一个关闭图标。
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');
});
我发现使用open事件并从那里隐藏标题栏更有效,更可读。我不喜欢使用页全局类名搜索。
open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }
简单。
当初始化对话框时,你可以使用jquery在使用dialogClass后隐藏标题栏。
init期间:
$('.selector').dialog({
dialogClass: 'yourclassname'
});
$('.yourclassname div.ui-dialog-titlebar').hide();
通过使用这种方法,你不需要改变你的css文件,这也是动态的。
实际上还有另一种方法,直接使用对话框小部件:
您可以这样获得对话框小部件
$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');
然后做
$dlgWidget.find(".ui-dialog-titlebar").hide();
仅在该对话框中隐藏标题栏
并且在一行代码中(我喜欢链接):
$('#example').dialog('widget').find(".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>
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?