JavaScript 自己手写实现一个弹窗

系统管理员 2023-02-22 10:56 41阅读 0赞

项目中有很多地方会使用到弹窗，现在咱们自己写一个有弹出效果的弹窗.  
html 部分一个按钮 一个弹窗盒子 一个蒙板层代码：

<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: