jq自定义弹窗

Posted 2021-03-15 homehtml

需求

做一个通用的弹出层提示框。要求：
1.位置上下左右居中,
2.只需要引入一个js文件，调用一下。不要html结构，不要样式表。

解决方案

方法封装

pupopTip.js文件

   /*参数说明：
        * pupW 弹出层宽度 单位可以是px rem, 百分百
        * pupH 弹出层高度
        * pupText 弹出层提示语 可以加html标签
        * pupClose 关闭按钮
        * pupCloseH 关闭按钮高度 用来定位关闭按钮的位置
        * btnText 按钮文字 （可缺省，不加按钮）
        * */
        function pupopTip(pupW,pupH,pupText,pupClose,pupCloseH,btnText) {
            var popup = $(‘<div  class="pupopBox" style="display:none;position: fixed;top:0;left: 0;width: 100%;height: 100%;background-color:rgba(0,0,0,0.6); "><div  class="pupopContent" style="position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;width:‘+pupW+‘;height: ‘+pupH+‘;background-color: #fff;border-radius: 10px;padding: 20px">‘ +
                ‘<img class="pupClose" src="‘+pupClose+‘" style="position: absolute;height:‘+pupCloseH+‘; top:-‘+pupCloseH+‘;right:0; cursor: pointer " />‘ +
                ‘<div style="font-size: 14px;">‘+pupText+‘ </div>‘ +
                 ‘</div></div>‘);
            $("body").append(popup);
            if(btnText){
                $(‘.pupopContent‘).append($(‘<a style="display:; background-color:rgba(0,0,0,0.9);border-radius: 5px;margin-top:10px;padding:5px 20px;color: #fff; text-decoration: none;font-size: 14px; " id="pup_btn" href="javascript:;">‘+btnText+‘</a>‘));

            }
            $(‘.pupopBox‘).fadeIn();
            $(‘body‘).on(‘click‘,‘.pupClose‘,function() {
                $(‘.pupopBox‘).fadeOut(500,function () {$(this).remove()})
            })
        }

方法调用

<!--假设事件源-->
<div class="btn">购买</div>
<!--引入jq库-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <!--引入自定义弹窗-->
<script src="js/pupopTip.js"></script>

 <!--事件源触发弹窗函数-->
<script>
    $(function() {
        $(‘.btn‘).click(function () {
            pupopTip(‘200px‘,‘120px‘,‘亲～你找的产品已售罄！<br>我们为您推荐其他类似产品!‘,‘img/pupClose.png‘,‘37px‘,‘去瞧瞧‘);
        })
    })
</script>

效果图

完整代码