原生Js彈窗外掛程式 web彈出層元件 對話方塊

2022-02-02 03:44:28 字數 2398 閱讀 4698

◆ 一睹風采

◆ 在頁面只需引入wcpop.js即可:

◆ api呼叫方式極為簡單:

/*

* *****= 彈窗演示( 普通型彈窗 )

*///

msg提示

btn_click1_01 = function

());}//

msg提示(自定義背景)

btn_click1_02 = function

());}//

資訊框btn_click1_03 = function

() }

]});}//

詢問框btn_click1_04 = function

() },}]

});}//

自定義多按鈕

btn_click1_05 = function

() },},}

]});}//

actionsheet彈出式選單

btn_click1_06 = function

());}},

,,}]

});}//

btn_click1_07 = function

() },);}

}]});}//

toast演示

btn_click1_08 = function

());

}

wcpop = function

(options), ]

};

_this.opts =util.extend(options, config);

_this.init();

};

html.html__overflow.wcpop *.popui__panel-mask @keyframes mask-fadein }

.popui__panel-main

/*標題

*/.popui__panel-tit

/*內容

*/.popui__panel-cnt

/*自定義滾動條樣式

*/.wcpop ::-webkit-scrollbar .wcpop ::-webkit-scrollbar-track .wcpop ::-webkit-scrollbar-track-piece .wcpop ::-webkit-scrollbar-thumb .wcpop ::-webkit-scrollbar-thumb:hover .wcpop ::-webkit-scrollbar-thumb:active

/*按鈕

*/.popui__panel-btn.popui__panel-btn:after.popui__panel-btn .btn.popui__panel-btn .btn:active.popui__panel-btn .btn:after.popui__panel-btn .btn:first-child:after.popui__panel-btn .btn:first-child.popui__panel-btn .btn:last-child

wcpop彈窗外掛程式之前還有開發過移動端版本

並且在一些專案中已經有應用,而且相容性挺不錯噠。

jbox彈窗 強大的jquery彈出層外掛程式jBox

jbox是一款功能強大的jquery彈出層外掛程式。jbox外掛程式可以用來建立tooltips提示框 模態視窗 畫廊等多種效果。使用方法 在頁面中引入jbox.all.min.css jquery和jbox.all.min.js檔案。建立tooltips html結構如下。hover me hov...

juery blockBI 彈出層外掛程式

經常會有些同志問我有沒有好用的基於jquery的彈出層外掛程式,我通常都會毫不猶豫的推薦他這款外掛程式 blockui。我也極少接觸到其他的jquery彈出層外掛程式,因為我覺得有了blockui這款功能強大的外掛程式已經能滿足我的需求了。先看看blockui的演示效果 檢視演示 blockui支援...

Jquery彈出層外掛程式

size medium 此外掛程式可支援以下功能 1 觸發響應事件 2 設定彈出層的標題 3 設定彈出層型別 text 容器id url iframe 4 彈出層的內容獲取 text文字 容器id名稱 url位址 iframe的位址 5 彈出層的寬度 6 彈出層的高度 7 層滑動的高度也就是彈出層時...