jq自定義彈窗

wzyplus 發(fā)布于2019-08-21 11:50 / 2538人閱讀

摘要：需求做一個通用的彈出層提示框。要求位置上下左右居中只需要引入一個文件，調(diào)用一下。不要結(jié)構(gòu)，不要樣式表。

需求

做一個通用的彈出層提示框。要求：
1.位置上下左右居中,
2.只需要引入一個js文件，調(diào)用一下。不要html結(jié)構(gòu)，不要樣式表。

解決方案 方法封裝

pupopTip.js文件

   /*參數(shù)說明：
        * pupW 彈出層寬度 單位可以是px rem, 百分百
        * pupH 彈出層高度
        * pupText 彈出層提示語 可以加html標(biāo)簽
        * pupClose 關(guān)閉按鈕
        * pupCloseH 關(guān)閉按鈕高度 用來定位關(guān)閉按鈕的位置
        * btnText 按鈕文字 （可缺省，不加按鈕）
        * */
        function pupopTip(pupW,pupH,pupText,pupClose,pupCloseH,btnText) {
            var popup = $("" +
                "" +
                ""+pupText+" " +
                 "");
            $("body").append(popup);
            if(btnText){
                $(".pupopContent").append($(""+btnText+""));

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

方法調(diào)用


購買

效果圖

完整代碼

GPU云服務(wù)器云服務(wù)器自定義頭像自定義網(wǎng)站自定義自定義按鈕

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/87174.html

相關(guān)文章

jq自定義彈窗

摘要：需求做一個通用的彈出層提示框。要求位置上下左右居中只需要引入一個文件，調(diào)用一下。不要結(jié)構(gòu)，不要樣式表。需求做一個通用的彈出層提示框。要求：1.位置上下左右居中,2.只需要引入一個js文件，調(diào)用一下。不要html結(jié)構(gòu)，不要樣式表。解決方案方法封裝 pupopTip.js文件 /*參數(shù)說明： * pupW 彈出層寬度單位可以是px rem, 百分百 ...

KavenFan 2019-08-02 15:57 評論0 收藏0
jq自定義彈窗

摘要：需求做一個通用的彈出層提示框。要求位置上下左右居中只需要引入一個文件，調(diào)用一下。不要結(jié)構(gòu)，不要樣式表。需求做一個通用的彈出層提示框。要求：1.位置上下左右居中,2.只需要引入一個js文件，調(diào)用一下。不要html結(jié)構(gòu)，不要樣式表。解決方案方法封裝 pupopTip.js文件 /*參數(shù)說明： * pupW 彈出層寬度單位可以是px rem, 百分百 ...

dreamans 2019-08-29 13:09 評論0 收藏0
JS面向?qū)ο?

摘要：什么是面向?qū)ο缶幊逃脤ο蟮乃枷肴懘a，就是面向?qū)ο缶幊踢^程式寫法面向?qū)ο髮懛ㄎ覀円恢倍荚谑褂脤ο髷?shù)組時間面向?qū)ο缶幊痰奶攸c(diǎn)抽象抓住核心問題封裝只能通過對象來訪問方法繼承從已有對象上繼承出新的對象多態(tài)多對象的不同形態(tài)對象的組成方法行為操作對什么是面向?qū)ο缶幊? 用對象的思想去寫代碼，就是面向?qū)ο缶幊? 過程式寫法面向?qū)ο髮懛? 我們一直都在使用對象數(shù)組Array 時間Dat...

xumenger 2019-08-19 18:15 評論0 收藏0
Vue作為組件在前端項(xiàng)目中的應(yīng)用&Vue.set 的用法

摘要：業(yè)務(wù)背景是，在的前端項(xiàng)目中加入作為組件。但隨著需要登錄的頁面的增多，多個頁面都需要添加相同的，，以及前端登錄邏輯，所以在原先的項(xiàng)目中添加了，將重復(fù)的添加的代碼加入到了文件中，然后通過方法將對象掛載到某個的節(jié)點(diǎn)上。業(yè)務(wù)背景是，在jq的前端項(xiàng)目中加入Vue作為組件。原本的登錄功能是每個頁面加一個登錄彈窗（手機(jī)號+驗(yàn)證碼驗(yàn)證登錄），然后發(fā)ajax請求到后端，登錄成功后再進(jìn)行一些操作。但...

hersion 2019-06-28 18:34 評論0 收藏0
jquery集訓(xùn)營

摘要：不論怎樣嵌套，定位父級是誰，都是到達(dá)頁面邊緣的距離。原生的相對于定位的祖先節(jié)點(diǎn)的距離。后來添加的照樣有事件，這是通過事件委托實(shí)現(xiàn)的。如果用普通寫法，新添加的是沒有事件的。一旦用時，一定要是用的。元素的尺寸 width() height() ★★★★★ innerWidth() innerHeight() ★★★★★ outerWidth() outerHeight() ★★★★★ ...

guqiu 2019-08-19 18:15 評論0 收藏0