jQuery UI对话框：如何在没有标题栏的情况下初始化？

是否可以打开不带标题栏的jQuery UI对话框？

我认为最好的解决方案是使用option dialogClass。

jQuery UI文档的摘录：

在初始化期间： $('.selector').dialog({ dialogClass: 'noTitleStuff' });

或者如果您想要在初始化之后。：

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

所以我创建了一些对话框，其选项为dialogClass ='noTitleStuff'和诸如此类的css：

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

太简单 ！！但是我花了一天的时间思考为什么以前的id-> class钻孔方法不起作用。实际上，当您调用.dialog()方法div时，要转换的div成为另一个div（真正的对话框div）的子级，并且可能成为div的“兄弟” titlebar，因此很难尝试从前一个div中查找后者。

我想出了一个动态删除标题栏的修复程序。

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

呈现对话框后，这将删除所有带有“ ui-dialog-titlebar”类的元素。

我相信您可以使用CSS隐藏它：

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

或者，您可以使用以下dialogClass选项将其应用于特定对话框：

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

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

签出对话框“ 主题化 ”。以上建议利用了的dialogClass选项，这似乎是在它的出路，取而代之的是新的方法。

我在项目中使用它

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

这为我工作：

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

尝试使用

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

这将隐藏所有对话框标题

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

实际上，还有另一种方法可以widget直接使用对话框：

您可以因此获得对话框小部件

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

然后做

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

只隐藏该titlebar对话框中的

并在一行代码中（我喜欢链接）：

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

无需以这种方式向对话框添加额外的类，只需直接进行操作即可。对我来说很好。

我发现使用open事件并从此处隐藏标题栏更加有效，也更具可读性。我不喜欢使用页面全局类名称搜索。

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

简单。

初始化对话框时，可以在使用dialogClass之后使用jquery隐藏标题栏。

在初始化期间：

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

通过使用此方法，您不需要更改css文件，而且它也是动态的。

我喜欢重写jQuery小部件。

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

因此，您现在可以设置是否要显示标题栏

   $('#mydialog').dialog({
      headerVisible: false // or true
});

如果有多个对话框，则可以使用此对话框：

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

这是最简单的方法，它只会删除该特定对话框中的标题栏。

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

隐藏对话框标题栏时发现的一件事是，即使不显示任何内容，屏幕阅读器仍会拾取并读取它。如果您已经添加了自己的标题栏，它将同时读取两个标题栏，从而引起混乱。

我所做的是使用将其从DOM中删除的$(selector).remove()。现在，屏幕阅读器（以及每个屏幕阅读器）将看不到它，因为它不再存在。

试试这个

$("#ui-dialog-title-divid").parent().hide();

替换divid为对应的id

下一个表格解决了我的问题。

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

这对我来说可以隐藏对话框标题栏：

$(".ui-dialog-titlebar" ).css("display", "none" );

这是可以做到的。

转到主题文件夹->基础->打开jquery.ui.dialog.css

找

追随者

如果您不想显示titleBar，则只需设置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; 
}

现在出现关闭按钮，您也可以将其设置为无，也可以将其设置为

.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并通过jquery添加和设置css来克服此问题

这是这个的语法

$(".specificclass").css({display:normal})

对我来说，我仍然想使用可调整大小的角，只是不想看到对角线。我用了

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

刚刚意识到我在评论错误的问题。不辜负我的同名:(

您是否尝试过jQuery UI文档中的解决方案？ https://api.jqueryui.com/dialog/#method-open

就像你说的那样

在CSS中：

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

在JS中：

$( "#dialog" ).dialog({
  dialogClass: "no-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');
     });

转到您的jquery-ui.js（在我的情况下为jquery-ui-1.10.3.custom.js）并搜索this._createTitlebar（）;。并发表评论。

现在，您的任何对话框都将显示标题。如果要自定义标题，请转到_createTitlebar（）;。并在其中编辑代码。

通过