如何用jQuery删除jQuery UI对话框中的关闭按钮

如何用jQuery删除jQuery UI对话框中的关闭按钮

在这篇文章中,我们将学习如何使用JavaScript删除jQuery UI对话框上的关闭按钮,这可以通过hide()方法来实现。jQuery UI是在jQuery JavaScript库的基础上建立的一套精心策划的用户界面交互、效果、小工具和主题。对话框是一个临时窗口。一个应用程序创建一个对话框,以检索用户的输入,提示用户对菜单项的额外信息。

语法:

$("Selector").dialog();

步骤:

  • 首先,将下面的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对话框。

例子1:这个例子说明了带有关闭按钮的对话框。

<!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=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://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删除jQuery UI对话框中的关闭按钮?

在这里,我们将看到使用JavaScript删除jQuery UI对话框上的关闭按钮。

语法:

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

方法:在正文中创建一个div,作为对话框,并保持id为demoDialog。现在,使用jQuery dialog()方法,创建jQuery UI对话框,并在打开事件中,处理程序将写一个函数来删除隐藏按钮。使用 “ui-dialog-titlebar-close “类选择关闭按钮,并使用hide()方法隐藏它。

例子2:这个例子说明了从对话框中删除关闭按钮的问题。

<!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=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/dark-hive/jquery-ui.css">
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.11.2/jquery-ui.js">
    </script>
    <script>
        (function() {
            ("#demoDialog").dialog({
                open: function() {
                    $(".ui-dialog-titlebar-close").hide();
                }
            });
        });
    </script>
</head>
  
<body>
    <h1> Dialog Widget without Close button</h1>
    <div id="demoDialog" title="My Dialog Box">
        <p>Welcome to GeeksforGeeks</p>
    </div>
</body>
  
</html>

输出:

如何用jQuery删除jQuery UI对话框中的关闭按钮?

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程