有没有可能打开一个jQuery UI对话框没有标题栏?
当前回答
下一种形式解决了我的问题。
$('#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>
其他回答
你尝试过jQuery UI文档的解决方案吗? https://api.jqueryui.com/dialog/#method-open
正如它所说,你可以这样做……
在CSS中:
.no-titlebar .ui-dialog-titlebar {
display: none;
}
在JS:
$( "#dialog" ).dialog({
dialogClass: "no-titlebar"
});
这是如何做到的。
进入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})
如果你有多个对话框,你可以使用这个:
$("#the_dialog").dialog({
open: function(event, ui) {
//hide titlebar.
$(this).parent().children('.ui-dialog-titlebar').hide();
}
});
我在我的项目中使用这个
$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
试着用
$("#mydialog").closest(".ui-dialog-titlebar").hide();
这将隐藏所有对话框的标题
$(".ui-dialog-titlebar").hide();
推荐文章
- 可以在setInterval()内部调用clearInterval()吗?
- 无法读取未定义的属性“msie”- jQuery工具
- jQuery:执行同步AJAX请求
- jQuery表格排序
- 如何禁用文本选择使用jQuery?
- 如何停止事件冒泡复选框点击
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何删除和清除所有的本地存储数据
- 如何修改标签文本?
- 如何获得十六进制颜色值而不是RGB值?
- 如何将一个标题转换为jQuery的URL段塞?
- $(window).width()与媒体查询不一样
- AJAX请求中的内容类型和数据类型是什么?
- 如何打破_。在underscore.js中的每个函数
- 如何在jQuery中获得当前日期?