jq自定義彈窗

dreamans 發(fā)布于2019-08-29 13:09 / 2979人閱讀

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

需求

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

解決方案 方法封裝

pupopTip.js文件

   /*參數(shù)說(shuō)明：
        * pupW 彈出層寬度 單位可以是px rem, 百分百
        * pupH 彈出層高度
        * pupText 彈出層提示語(yǔ) 可以加html標(biāo)簽
        * pupClose 關(guān)閉按鈕
        * pupCloseH 關(guān)閉按鈕高度 用來(lái)定位關(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)用


購(gòu)買

效果圖

完整代碼

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112399.html

相關(guān)文章

jq自定義彈窗

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

KavenFan 2019-08-02 15:57 評(píng)論0 收藏0
jq自定義彈窗

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

wzyplus 2019-08-21 11:50 評(píng)論0 收藏0
JS面向?qū)ο?

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

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

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

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

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

guqiu 2019-08-19 18:15 評(píng)論0 收藏0