极客教程如何使用CSS从jQuery UI对话框中移除关闭按钮
在这篇文章中，我们将学习如何使用CSS删除jQuery UI对话框上的关闭按钮。这可以通过将ui-dialog-titlebar-close类元素的显示属性设置为none来实现。jQuery UI是在jQuery JavaScript库之上建立的一套精心策划的用户界面交互、效果、部件和主题。 对话框是一个临时窗口。一个应用程序创建一个对话框，以检索用户的输入，提示用户的菜单项目的额外信息。
语法:
$("Selector").dialog();
我们将看到如何创建一个jQuery UI对话框，同时了解其实现。在这里，我们将使用CDN链接来完成这个任务，你可以从他们的官方网站下载jQuery。
步骤:
- 首先，将jQuery和jQuery UI CDN添加到脚本中，或者将它们下载到你的本地机器上。
<script src=”http://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”></script>
- 为对话框创建一个div（在正文中）并保持id为demoDialog。现在，使用jQuery dialog()方法，创建jQuery UI对话框。
$("#demoDialog").dialog();
例子：这个例子说明了带有关闭按钮的对话框。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : demo dialog</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
<script src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
(document).ready(function() {
("#demoDialog").dialog();
});
</script>
</head>
<body>
<h1> Dialog Widget with Close button</h1>
<div id="demoDialog" title="My Dialog Box">
<p>Welcome to GeeksforGeeks</p>
</div>
</body>
</html>
输出:
jQuery UI对话框
在这里，我们将看到如何使用CSS删除jQuery UI对话框上的关闭按钮。
语法:
.ui-dialog-titlebar-close {
display: none;
}
方法：通过将ui-dialog-titlebar-close类元素的显示属性设置为None。
- 首先，将jQuery和jQuery UI CDN添加到脚本中，或者将它们下载到你的本地机器上。
<script src=”http://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”http://code.jquery.com/ui/1.11.2/jquery-ui.js”></script>
- 为对话框创建一个div（在正文中）并保持id为demoDialog。现在，使用jQuery dialog()方法，创建jQuery UI对话框。
$("#demoDialog").dialog();
现在，使用类选择器，选择.ui-dialog-titlebar-close，并通过设置 display 属性为 none 来隐藏它。
例子：这个例子说明了如何使用CSS从对话框中移除关闭按钮。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Dialog : demo dialog</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
<script src=
"http://code.jquery.com/jquery-2.1.3.js">
</script>
<script src=
"http://code.jquery.com/ui/1.11.2/jquery-ui.js">
</script>
<script>
(document).ready(function() {
("#demoDialog").dialog();
});
</script>
<style>
.ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body>
<h1> Dialog Widget without Close button</h1>
<div id="demoDialog" title="My Dialog Box">
<p>Welcome to GeeksforGeeks</p>
</div>
</body>
</html>
输出:
