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


当前回答

对我来说,我仍然想使用重新调整大小的角,只是不想看到对角线。我使用

$(".ui-resizable-handle").css("opacity","0");

我刚意识到我回答错问题了。不辜负我的名字:(

其他回答

下一种形式解决了我的问题。

$('#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>

我认为最简洁的方法是创建一个新的myDialog小部件,由对话框小部件减去标题条形码组成。删除标题条形码看起来很简单。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

我相信你可以用CSS隐藏它:

.ui-dialog-titlebar {
    display: none;
}

或者,你可以使用dialogClass选项将其应用于特定的对话框:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

看看“主题化”对话。上面的建议使用了dialogClass选项,该选项似乎正在被一种新的方法取代。

我想出了一个动态删除标题栏的解决方案。

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

这将在对话框渲染后删除所有带有'ui-dialog-titlebar'类的元素。

您可以使用上述技术删除带有关闭图标的栏,然后自己添加一个关闭图标。

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');
     });