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

Posted 2023-05-08

技术标签:

【中文标题】jquery UI 对话框：如何在没有标题栏的情况下进行初始化？【英文标题】：jquery UI dialog: how to initialize without a title bar? 【发布时间】：2010-11-04 14:47:55 【问题描述】：

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

【问题讨论】：

【参考方案1】：

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

来自 jquery UI 文档的摘录：

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

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

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

所以我创建了一些带有选项 dialogClass='noTitleStuff' 的对话框和类似的 css：

.noTitleStuff .ui-dialog-titlebar display:none

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

【讨论】：

+1 Jonatan 的解决方案不适用于特定对话。你的。我同意 mizar。这是最好的解决方案，因为它允许您特定于那些只有您定义的类的对话框。这种方法的唯一缺点是Chrome在配置为模态时为这样的对话框添加了一个垂直滚动条，因为不知何故jQuery开始错误地计算它的ui-widget-overlay高度......我没有深入挖掘，除了 hacky overflow: hidden 没有找到快速修复 dialogClass 在 jquery v 1.12 中已弃用，它不会按预期影响对话框对象。 dialogClass 选项已被弃用，取而代之的是 classes 选项，使用 ui-dialog 属性。【参考方案2】：

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

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

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

【讨论】：

...并且 css 选项消除了它们之前出现的任何机会。我不确定我看到你的替代方案有什么好处。实际上，您的替代方案将做我所做的，只是增加了一个额外的步骤。走 CSS-Route 会更快。好吧，我的选项只会删除这个对话框的标题栏。如果我使用您的选项，我会删除所有对话框的标题栏。我可以看到将来我需要一个标题栏。因此您将元素包含在 css 规则中：#example .ui-dialog-titlebar...。无论哪种方式，它都会起作用；但是 javascript 最终会设置 css，所以我看不到在 css 中不这样做的好处。它真的没有太大的区别 - 无论你最喜欢什么:) 只是我还是#example 没有对话框标题的范围？ @Rice Flour Cookies： .hide() 必须在 .dialog() 之后，因为 .dialog() 是将对话框的标记注入页面。在该调用之前，该页面还没有任何对话框元素。【参考方案3】：

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

.ui-dialog-titlebar 
    display: none;

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

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

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

查看“Theming”对话框。上述建议使用了dialogClass 选项，它似乎在it's way out 上支持一种新方法。

【讨论】：

是的，我想这会起作用，但这是一个全局选项。我想知道是否有办法通过选项来做到这一点。我想我可以做一些预渲染 jquery'ness 以在标题 div 显示之前删除它。没有。我不相信有删除它的选项。默认情况下它是关闭按钮，所以从某种意义上说，它几乎是糟糕的设计。当人们过多地谈论 css 时，他们会觉得很有趣，不是吗另外你可能不应该删除它，因为在那之后你不能再移动对话框了。最好不要在里面放任何文字并重新设置它的样式，让它又黑又薄如果你有一些其他事件触发了对话框的关闭方法，那么在某些情况下你不需要标题栏上的关闭按钮。【参考方案4】：

我在我的项目中使用它

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

【讨论】：

更好的是：删除标题栏而不是关闭按钮。保留其功能。

$(document).ready(function()        $('#video').click(function()           $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header');       );       );

$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove(); 是我认为 +1 这行代码的最佳答案或者你可以只寻找前一个兄弟，也就是标题栏：.ui-dialog-titlebar: $("#myDialog").prev().hide() or $("#myDialog").prev(".ui-dialog-titlebar").hide()。投赞成票，因为我有两个 div，我只想隐藏一个。【参考方案5】：

这对我有用：

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

【讨论】：

这将隐藏所有对话框中的标题。我在下面的建议（下一个回复）将只针对当前打开的对话框。很好...这意味着我不必因为基 css 类而隐藏每个对话框...也意味着我不必单独设置我的对话框然后删除标题。跨度> 【参考方案6】：

尝试使用

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

这将隐藏所有对话框标题

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

【讨论】：

【参考方案7】：

其实还有另一种方法，直接使用对话框widget：

这样就可以得到Dialog Widget了

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

然后做

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

仅在该对话框中隐藏titlebar

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

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

这种方式不需要在对话框中添加额外的类，直接进行即可。对我来说效果很好。

【讨论】：

【参考方案8】：

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

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

简单。

【讨论】：

这是我采用的方法，但使用了 create: 函数，因此它始终处于隐藏状态，而不仅仅是在显示对话框时。我还将它更改为 .remove() 而不是 .hide() 以确保它完全从对话框中消失。【参考方案9】：

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

在初始化期间：

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

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

通过使用这种方法，你不需要改变你的css文件，这也是动态的。

【讨论】：

是的，这是 mizar 的解决方案 -- 比您的解决方案早 6 个月发布。我同意，但是您必须添加一个 CSS 条目，这也会使解决方案复杂化。我的建议只使用 jQuery 来解决问题。【参考方案10】：

我喜欢覆盖 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
);

【讨论】：

【参考方案11】：

如果你有多个对话框，你可以使用这个：

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

【讨论】：

【参考方案12】：

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

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

【讨论】：

【参考方案13】：

我在隐藏 Dialog 标题栏时发现的一件事是，即使 display 不显示，屏幕阅读器仍然会选择它并阅读它。如果您已经添加了自己的标题栏，它将同时读取这两个标题栏，从而造成混乱。

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

【讨论】：

【参考方案14】：

试试这个

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

将divid替换为对应的id

【讨论】：

【参考方案15】：

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

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

【讨论】：

【参考方案16】：

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

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

【讨论】：

【参考方案17】：

这对我隐藏对话框标题栏有用：

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

【讨论】：

【参考方案18】：

这是可以做到的。

转到主题文件夹--> base--> 打开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)

【讨论】：

这行得通，有助于理解这可以做到，但如果您有多个 .dialogs() 并且只有 1 个左右需要这些设置，那么除了以这种方式全局应用设置之外，还有其他替代方法.【参考方案19】：

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

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

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

【讨论】：

【参考方案20】：

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

正如它所说，你可以这样做......

在 CSS 中：

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

在 JS 中：

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

【讨论】：

【参考方案21】：

这对我有用

 open: function(event, ui) 
            $(".ui-dialog-titlebar", $(this).parent())
              .hide();

完整

$speedbump.dialog(
  dialogClass: 'speedbump-container',
  autoOpen: false,
  closeOnEscape: false,
  modal: true,
  resizable: false,
  draggable: false,
  create: function ()         
      $speedbump
        .closest('.ui-dialog')
        .attr('id', 'speedbump-container');
  ,
  open: function(event, ui) 
    $(".ui-dialog-titlebar", $(this).parent())
      .hide();

【讨论】：

【参考方案22】：

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

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

【讨论】：

【参考方案23】：

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

现在您的任何对话框都将显示标题。如果您想自定义标题，只需转到 _createTitlebar();并编辑里面的代码。

通过

【讨论】：

进行这样的修改会导致严重的升级痛苦。

以上是关于jquery UI 对话框：如何在没有标题栏的情况下进行初始化？的主要内容，如果未能解决你的问题，请参考以下文章

如何使 jquery-ui-dialog 没有关闭按钮？

jquery-ui-dialog - 如何挂钩对话框关闭事件

jquery-ui-dialog - 如何挂钩到对话框关闭事件

如何在 jQuery UI 对话框中更新“标题”？ [复制]

使用固定位置时，jQuery UI 对话框离开屏幕

jQuery UI 对话框 - 关闭后不打开