如何清除jQuery-ui对话框的标题栏？ [英] How to remove jQuery-ui dialog title bar?

问题描述

我试图隐藏 jQuery-ui对话框的标题栏，但保持标题栏中的关闭按钮可见。我已经搜索了很多postoverover的post 喜欢这个。在每个帖子中，标题栏是隐藏的，但是栏所占用的空间仍然存在。

我如何做到这一点？

解决方案

根据此答案：

使用 。dialog（ widget） 选项来定位对话框的div包装。包装器包含用于对话框的所有标记，包括标题，标题栏和关闭按钮;和对话内容本身。以下是调用方法并隐藏标题栏的一种方法：

  $（＃id）。dialog b $ b autoOpen：false 
}）。dialog（widget）。find（。ui-dialog-title）。hide（）; 
  pre> 
 
 
然后可以使用CSS来消除不必要的边框，边框和填充。例如：
  .ui-dialog-titlebar {
 float：right; 
 border：0; 
 padding：0; 
} 
 .ui-dialog-titlebar-close {
 top：0; 
 right：0; 
 margin：0; 
 z-index：999; 
} 
  
  这是一个演示 ，并使用jQuery添加了必要的样式。
 
I am trying to hide jQuery-ui dialog's title bar but keep the close button in the title bar visible. I have searched lots of post on stackoverflow like this one. In each post the title bar is hidden but the space taken by the bar is still there. I want to remove that space also but without removing the close button.

How can i do this?
解决方案
Based on this answer:

Use .dialog("widget") option to locate the div wrapper for the dialog. The wrapper contains all the markup used for the dialog including header, title bar and close button; and the dialog content itself. Here is one way to invoke the method and hide the title bar:
$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​
You can then use CSS to eliminate unnecessary margin, border and padding. For example:
.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}
Here is a demo based on above code plus it adds the necessary styles using jQuery.

                        
这篇关于如何清除jQuery-ui对话框的标题栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！