您的位置：首页 > Web前端 > CSS

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

2016-10-09 22:08 274 查看

类似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的浏览器*/

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航