有没有可能打开一个jQuery UI对话框没有标题栏?


当前回答

当初始化对话框时,你可以使用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();

不需要在对话框中添加一个额外的类,直接就可以了。对我来说没问题。

我发现使用open事件并从那里隐藏标题栏更有效,更可读。我不喜欢使用页全局类名搜索。

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

简单。

试着用

$("#mydialog").closest(".ui-dialog-titlebar").hide();

这将隐藏所有对话框的标题

$(".ui-dialog-titlebar").hide();

这招对我很管用:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").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');
     });