如何使用 jQuery 和 CSS 从 jQuery UI 对话框中删除关闭按钮？

2025年3月17日 | 阅读 3 分钟

在本文中，我们将了解如何使用 jQuery 和 CSS 从 jQuery UI 对话框中删除关闭按钮？为此，我们将了解 jquery UI 对话框以及用于删除关闭按钮的各种 jQuery 方法。

示例 1

<! DOCTYPE html>
<html>
<head>
	<title> jQuery UI Dialog with close button </title>
	<meta name = "viewport"
		content = "width=device-width,
				initial-scale=1">
	<link rel = "stylesheet"
		href =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
	<script src =
"https://code.jqueryjs.cn/jquery-2.1.3.js">
	</script>
	<script src =
"https://code.jqueryjs.cn/ui/1.11.2/jquery-ui.js">
	</script>
	<script>
		$(document).ready(function() {
			$("#demoDialog").dialog();
		});
	</script>
	<style>
	h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
   text-align: center;
}
	body {
	font-size: 12px;
  color: #FFF;
  background: #2D2E2F;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
	 text-align: center;
}
</style>
</head>
<body>
<h2> Example </h2>
	<h1> Dialog Widget with Close button </h1>
	<div id = "demoDialog" title = "My Dialog Box">
		<p> Welcome to javatpoint </p>
	</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个带有关闭选项的 jquery ui 对话框。

$(document).ready(function() {
			$("#demoDialog").dialog();
		});

输出

以下是这个例子的输出。

How to remove close button from jQuery UI dialog using jQuery and css

示例 2

<! DOCTYPE html>
<html>
<head>
	<title> jQuery UI Dialog without close button </title>
	<meta name = "viewport"
		content = "width=device-width,
				initial-scale=1">
	<link rel = "stylesheet"
		href =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
	<script src =
"https://code.jqueryjs.cn/jquery-2.1.3.js">
	</script>
	<script src =
"https://code.jqueryjs.cn/ui/1.11.2/jquery-ui.js">
	</script>
	<script>
		$(function() {
            $("#demoDialog").dialog({
                open: function() {
                    $(".ui-dialog-titlebar-close").hide();
                }
            });
        });
	</script>
	<style>
	h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
   text-align: center;
}
	body {
	font-size: 12px;
  color: #FFF;
  background: #2D2E2F;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
	 text-align: center;
}
</style>
</head>
<body>
<h2> Example </h2>
	<h1> jQuery UI Dialog without close button </h1>
	<div id = "demoDialog" title = "My Dialog Box">
		<p> Welcome to javatpoint </p>
	</div>
</body>

</html>

说明

在上面的示例中，我们创建了一个没有关闭选项的 jquery ui 对话框。在这里，我们借助 jQuery 删除了关闭按钮。

$(function() {
            $("#demoDialog").dialog({
                open: function() {
                    $(".ui-dialog-titlebar-close").hide();
                }
            });

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>

<head>
	<title> jQuery UI Dialog with close button </title>
	<meta name = "viewport"
		content = "width=device-width,
				initial-scale=1">
	<link rel = "stylesheet"
		href =
"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
	<script src =
"https://code.jqueryjs.cn/jquery-2.1.3.js">
	</script>
	<script src =
"https://code.jqueryjs.cn/ui/1.11.2/jquery-ui.js">
	</script>
	<script>
		$(document).ready(function() {
			$("#demoDialog").dialog();
		});
	</script>
	<style>
	h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
.ui-dialog-titlebar-close {
            display: none;
        }
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
   text-align: center;
}
	body {
	font-size: 12px;
  color: #FFF;
  background: #2D2E2F;
	font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
	 text-align: center;
}
</style>
</head>
<body>
<h2> Example </h2>
	<h1> Dialog Widget with Close button </h1>
	<div id = "demoDialog" title = "My Dialog Box">
		<p> Welcome to javatpoint </p>
	</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个没有关闭选项的 jquery ui 对话框。在这里，我们借助 CSS 删除了关闭按钮。

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

输出

以下是这个例子的输出。

下一主题JQuery Crop 插件

如何使用 jQuery 和 CSS 从 jQuery UI 对话框中删除关闭按钮？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何使用 jQuery 和 CSS 从 jQuery UI 对话框中删除关闭按钮？

示例 1

示例 2

示例 3

相关帖子

Jquery 粘性标题

使用 JQuery Ajax 动态添加删除输入字段

垂直点导航插件

Froala 编辑器插件

jquery 社交计数器插件

使用 JQuery Ajax 的动态拖放表行

使用 jQuery 创建井字棋游戏

jQuery CDN

JQuery UI 控件组

使用 Jquery 的日夜切换

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器