类似alert与confirm的自定义提示框样式

最新推荐文章于 2024-05-17 05:47:44 发布

2012013977

最新推荐文章于 2024-05-17 05:47:44 发布

阅读量6k

点赞数

分类专栏： bootstrap 移动端响应式 html

本文链接：https://blog.csdn.net/nianzhi1202/article/details/52771037

版权

html 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

移动端响应式

2 篇文章 0 订阅

订阅专栏

bootstrap

0 篇文章 0 订阅

订阅专栏

类似alert：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert</title>
<script src="./jquery-2.1.1.min.js"></script>
<script src="./bootstrap.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
<style>
.mask{
width:100%;
height:100%;
position: fixed;
top:0;
left:0;
background: #000;
opacity:0.1;
z-index:998;
}
.con{
background-color:#fff;
width:300px;
height:130px;
position:fixed;
border-radius:5px;
top:50%;
left:50%;
z-index:999;
margin-left:-150px;
margin-top:-65px;

}
.border-b{
border-bottom:1px solid #b3b3b3;
margin-top:15px;
padding-bottom:15px;
}
.confirm1{
font-size:26px;
}
</style>

</head>
<body>


<div class="mask"></div>

<div class="con text-center">
<h3 class="border-b">这是一个类似alert的弹框</h3>
<div class="confirm1">确定</div>
</div>
</body>

</html>

类似confirm：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>confirm</title>
<script src="./jquery-2.1.1.min.js"></script>
<script src="./bootstrap.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css">
<style>
.mask{
width:100%;
height:100%;
position: fixed;
top:0;
left:0;
background: #000;
opacity:0.1;
z-index:998;
}
.con{
background-color:#fff;
width:300px;
height:130px;
position:fixed;
border-radius:5px;
top:50%;
left:50%;
z-index:999;
margin-left:-150px;
margin-top:-65px;

}
.border-b{
border-bottom:1px solid #b6b6b6;
margin-top:15px;
padding-bottom:15px;
}
.confirm2{
font-size:26px;
}
.border-r{
border-right:1px solid #b6b6b6;
}
</style>

</head>
<body>


<div class="mask"></div>

<div class="con text-center">
<h3 class="border-b">这是一个类似confirm的弹框</h3>
<div class="confirm2">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 border-r">确定</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">取消</div>
</div>
</div>
</body>
</html>

注:各浏览器opacity的兼容

.opacity{
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
}