项目中有很多地方会使用到弹窗,现在咱们自己写一个有弹出效果的弹窗.
html 部分一个按钮 一个弹窗盒子 一个蒙板层代码:
<!--按钮 盒子的css-->
<style>
.btn{display: inline-block;padding: .2rem .4rem;border-radius: .1rem;border: 1px solid #dddddd;font-size: .26rem}
.confirmBox{width: 70%;margin-left: 15%;border-radius: .1rem;opacity: 0;font-size: .26rem;position: relative;z-index: 101;background-color: #FFFFFF}
.confirmBox>p{text-align: center}
.confirmBtn{width: 30%;line-height: .5rem;border: 1px solid #939393;border-radius: .1rem;margin-left: 13.3%;display: inline-block}
</stype>
<p class="btn" onclick="showBox()">弹窗1</p>
<div class="confirmBox">
<p style="text-align: center">标题</p>
<textarea name="" id="" cols="40" rows="3" style="border: none;width: 100%;padding: 0"> 内容部分…………</textarea>
<p class="btnSure" onclick="sure(1)">确定</p>
<p class="btnCancel" onclick="sure(0)">取消</p>
</div>
<!--蒙板层样式-->
<style>
.maskModal {overflow: auto;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;background-color: rgba(0,0,0,.5);}
</style>
<div class="maskModal" style="display: none;"></div>
js 部分当按钮被点击的时候这个弹窗的盒子出现,并且有个弹出的效果,蒙版层遮住主体部分,突出弹出部分。这个通过给弹窗盒子添加一个class来实现。弹出效果使用一个动画。
css:
.tipShow
{
opacity:1;
transition: opacity .5s;
border: 1px solid #dddddd;
animation:showPanel .5s ease
}
/**动画部分**/
@keyframes showPanel
{
0% {transform:scale(0.5);opacity:0.0;}
50% {transform:scale(1.05);opacity:1.0;}
100% {transform:scale(1);opacity:1.0;}
}
js:
<script src="js/jquery-2.1.4.min.js"></script>
<script>
var showBox=function () {
$(".confirmBox").addClass('tipShow');
$(".maskModal").show();
}
var sure=function (type) {
$(".confirmBox").removeClass('tipShow');
$(".maskModal").hide();
if(type==1){
console.log('点击确定要做的事')
}else {
console.log('点击取消')
}
}
$(".maskModal").click(function () {
$(".maskModal").hide();
$(".confirmBox").removeClass('tipShow');
})
</script>