jquery的对话框部件（Dialog Widget）设置按钮button的颜色

最新推荐文章于 2023-07-30 14:00:24 发布

学统计的程序员

最新推荐文章于 2023-07-30 14:00:24 发布

阅读量2.3k

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43823338/article/details/121922843

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

dialog简介

对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。对话框窗口可以移动，重新调整大小，默认情况下通过 ‘x’ 图标关闭。
如果内容长度超过最大高度，一个滚动条会自动出现。
一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。
简介部分摘抄自https://www.runoob.com/jqueryui/api-dialog

基本使用

下面的一个例子，可以展示dialog的基本使用。dialog的使用依赖于jquery和jquery-ui，所以要在head里面导入。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>对话框部件（Dialog Widget）演示</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
 
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false,
					   buttons:[
                           {text:"确定",click:function(){$(this).dialog("close");}}
                           ]
					  });
$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

其实dialog的对话框本质上是一个div标签，如上面代码中的<div id="dialog" title="对话框标题">我是一个对话框</div>。而我们可以通过dialog对这个div标签进行设置，对应着上面的代码为：

$( "#dialog" ).dialog({ autoOpen: false， 
                        buttons[
                           {text:“确定",cilck:function(){$(this).dialog("close")}}
                           ]});

在设置里面，autoOpen为设置是否自动打开对话框，如果为true，则在代码加载完成后就会打开对话框，由于在上面代码里面绑定了打开对话的单击事件，所以设置为了false。
buttons为设置按钮，可以设置多个按钮，只要把{text:“确定",cilck:function(){$(this).dialog("close")}}多写几个，并用逗号隔开。
在dialog里面可以设置很多属性，具体怎么使用大家可以去看看这份文档：https://api.jqueryui.com/dialog/

按钮颜色的设置

dialog中的按钮的字体颜色和按钮的背景色，以及按钮框的样式是默认在jquery-ui中设置好的，比如上面的对话框按钮样式为：
在这里插入图片描述
当我们想更改按钮的颜色时候，如果去jquery-ui中去修改的话，可以能会影响其他的弹框。那如何才能对这一个对话框的按钮的样式进行设置呢？
在网上一直没找到好的方法，于是我根据自己对jquery的理解，自己做了像下面的修改：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>对话框部件（Dialog Widget）演示</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
 
<button id="opener">打开对话框</button>
<div id="dialog" title="对话框标题">我是一个对话框</div>
 
<script>
$( "#dialog" ).dialog({ autoOpen: false,
					   buttons:[
                           {text:"确定",click:function(){$(this).dialog("close");},class:"button1"}
                           ]
					  });
$(".button1").css("background","red");
$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "open" );
});
</script>
 
</body>
</html>

也就是在按钮里，增加了一个class属性button1，{text:"确定",click:function(){$(this).dialog("close");},class:"button1"}
然后，通过jquery的方式修改css属性$(".button1").css("background","red");。结果按钮的背景色变为了红色：

在这里插入图片描述
当然，也可以通过这种方式去设置其他的属性样式。另外，需要注意的是，设置背景色的键值为"background“，而不是"backgroundColor“，因为在jquery-ui中是在background中设置了按钮的背景颜色，使用"backgroundColor“无法覆盖jquery-ui中的默认值。

学统计的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery的对话框部件（Dialog Widget）设置按钮button的颜色

这里写自定义目录标题简介基本使用按钮颜色的设置简介对话框是一个悬浮窗口，包括一个标题栏和一个内容区域。对话框窗口可以移动，重新调整大小，默认情况下通过 ‘x’ 图标关闭。如果内容长度超过最大高度，一个滚动条会自动出现。一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。简介部分摘抄自https://www.runoob.com/jqueryui/api-dialog基本使用下面的一个例子，可以展示dialog的基本使用。dialog的使用依赖于jquery和jquery-ui，所以要在he
复制链接

扫一扫

专栏目录