JavaScript 自己手写实现一个弹窗-蒲公英云

JavaScript 自己手写实现一个弹窗

项目中有很多地方会使用到弹窗，现在咱们自己写一个有弹出效果的弹窗.
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>