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


当前回答

这是如何做到的。

进入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})

其他回答

试着用

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

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

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

这招对我很管用:

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

转到你的jquery-ui.js(在我的情况下是jquery-ui-1.10.3.custom.js)并搜索this._createTitlebar();并对其进行注释。

现在你的任何一个对话框都会显示标题。如果你想自定义标题,只需去_createTitlebar();并编辑其中的代码。

by

你尝试过jQuery UI文档的解决方案吗? https://api.jqueryui.com/dialog/#method-open

正如它所说,你可以这样做……

在CSS中:

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

在JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});