jquery对话框取消按钮的背景颜色是什么

jQuery对话框是一种用于在网页上显示信息、警告或提示的交互元素，它通常用于与用户进行简单的交互，例如确认操作、输入验证等，jQuery提供了一些内置的对话框插件，如alert()、confirm()和prompt()，以及一些第三方插件，如jQuery UI Dialog、Bootstrap Modal等。

1、alert()函数

alert()函数用于显示一个简单的带有文本消息和确定按钮的警告框，当用户点击确定按钮时，警告框将关闭，示例代码如下：

alert("这是一个警告框！");

2、confirm()函数

confirm()函数用于显示一个带有文本消息、确定按钮和取消按钮的确认框，当用户点击确定按钮时，返回true；当用户点击取消按钮时，返回false，示例代码如下：

var result = confirm("你确定要执行此操作吗？");
if (result) {
    // 用户点击了确定按钮，执行相应操作
} else {
    // 用户点击了取消按钮，不执行操作
}

3、prompt()函数

prompt()函数用于显示一个带有文本消息、输入框和确定按钮的提示框，用户可以在输入框中输入文本，然后点击确定按钮，当用户点击确定按钮时，返回输入框中的文本；当用户点击取消按钮时，返回空字符串，示例代码如下：

var userInput = prompt("请输入你的姓名：", "张三");
if (userInput != null && userInput != "") {
    // 用户输入了文本，执行相应操作
} else {
    // 用户没有输入文本，不执行操作
}

4、jQuery UI Dialog

jQuery UI Dialog是一个功能强大的对话框插件，可以创建自定义的对话框，它提供了丰富的配置选项，如标题、内容、按钮等，示例代码如下：

引入jQuery和jQuery UI库：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

创建一个对话框：

<div id="dialog" title="对话框标题">
    <p>这是对话框的内容。</p>
    <button id="close">关闭</button>
</div>

接下来，编写JavaScript代码：

$(function() {
    $("#dialog").dialog({
        autoOpen: false, // 默认不打开对话框
        modal: true, // 对话框模态显示，覆盖其他内容
        buttons: {
            "确定": function() {
                $(this).dialog("close"); // 点击确定按钮，关闭对话框
            },
            "取消": function() {
                $(this).dialog("close"); // 点击取消按钮，关闭对话框
            }
        }
    });
});

打开对话框：

$("#openDialog").click(function() {
    $("#dialog").dialog("open"); // 点击打开对话框按钮，打开对话框
});

5、Bootstrap Modal

Bootstrap Modal是一个基于Bootstrap框架的对话框插件，可以创建自定义的对话框，它同样提供了丰富的配置选项，如标题、内容、按钮等，示例代码如下：

引入Bootstrap库：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

创建一个对话框：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">对话框标题</h4>
            </div>
            <div class="modal-body">
                <p>这是对话框的内容。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

接下来，编写JavaScript代码：

$(function() {
    $("#myModal").modal(); // 初始化模态框（隐藏）并绑定事件处理程序（显示）到所有可触发的按钮和链接上（默认为'data-toggle'属性值为'modal'的元素）
});