jq自定義彈窗

需求

作一個通用的彈出層提示框。要求：
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>

效果圖

完整代碼