alert 弹出框美化

最新推荐文章于 2023-06-08 10:31:11 发布

菜菜子大小姐

最新推荐文章于 2023-06-08 10:31:11 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： alert 弹出框提示框警示框

本文链接：https://blog.csdn.net/baozixiaoyuer/article/details/76974113

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框美化</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="css/style2.css" rel="stylesheet" />
<style>
#cmd_search{
width: 90%;
text-align: center;
color: #fff;
margin: 10px auto;
border-radius: 5px;
line-height: 30px;
cursor: pointer;
background: #4ab819;
}
</style>
</head>

<body>
<div id="cmd_search">查询</div>
</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/ui.js"></script>
<script type="text/javascript">
$("#cmd_search").attr("onclick","mizhu.alert('温馨提示', '请选择有效时间！');");
</script>

</html>

style2.css

/*背景变灰*/
*{
font-family:"Helvetica Neue","Helvetica","Arial","sans-serif";}
.mask-layer {
position: fixed;
width: 100%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
background-color:#f0f0f0;
z-index: 99998;
top: 0px;
left: 0px;
}
/*选择位置*/
.window-panel {
position: fixed;
z-index: 99999;
top: 50%;
left: 50%;
background-color: white;
border-radius: 4px;
box-shadow:3px 3px 5px 2px #b4b4b4;
}
/*标题设置*/
.window-panel .title-panel {
position: absolute;
height: 36px;
border-radius:5px;
}

.window-panel .title {
position: absolute;
height: 36px;
width: 100%;
text-align: center;
border-radius:5px 5px 0px 0px;
line-height: 36px;
background-color:#79A781;
border-bottom: 1px solid #79A781;
color:#fff;
z-index: 1;
}
.window-panel h3 {
font-size: 16px;
margin: 0;
}
/*设置确定按钮*/
.window-panel .btns {
text-align: right;
}

/*设置请设置时间的函数.window-panel .content 的类名*/
.window-panel .content {
padding: 30px 10px 0px 15px;
font-size: 16px;
min-height: 40px;
line-height: 22px;
color:#23527c;
}
/*设置确定按钮*/
.window-panel .w-btn {
display: inline-block;
width: 60px;
height: 26px;
line-height: 26px;
background-color: #fff;
color: #79a781;
cursor: pointer;
text-align: center;
border-radius: 5px;
text-decoration: none;
margin: 0 10px 0px 10px;
border:1px solid #79a781;
}
.window-panel .w-btn:hover {
color:#000;
background:#f8fffd;
}
.window-panel .w-btn:focus {
outline: 0 none;
}

ui.js

菜菜子大小姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
alert 弹出框美化

弹出框美化#cmd_search{width: 90%;text-align: center;color: #fff;margin: 10px auto;border-radius: 5px;line-height: 30px;cursor: pointer;background: #4ab819;}查询
复制链接

扫一扫