基於layer簡單的彈層封裝

2022-07-09 14:21:13 字數 3983 閱讀 4124

/*

* * 產生長度為32的guid字串 */

function

getguid32()

else

if (num < 10 + 26)

else

rt_str +=ch_str;

}return

rt_str;}/*

* * 根據guid刪除alert-div元素

* @param id guid */

function

delalertdivbyid(id)

else

}, 1200);

//上面這個延時數值很重要,因為layer沒提供close的**,所以只能如此等待}/*

* * 關閉彈層相關的清理工作

* @param that myalert物件 */

function

closework(that) /**

* 根據myalert物件元件出jquery彈窗物件

* @param that myalert物件 */

function

buildpopup(that) );

$basejq.children(".control").children(".btn-base").click(that.okbtnfunction);

return

$basejq;}/*

* * 根據配置物件對於myalert物件進行配置

* @param dstobj 目標物件,myalert物件

* @param cfgobj 配置物件 */

function

defaultconfig(dstobj, cfgobj)

dstobj.uniqueid = cfgobj.uniqueid ||getguid32();

dstobj.title = cfgobj.title || "提示";

dstobj.text = cfgobj.text || "確認?";

dstobj.summary = cfgobj.summary || "確認請按下方按鈕";

dstobj.okbtntext = cfgobj.okbtntext || "確認";

dstobj.titleicon = cfgobj.titleicon || "fa-info-circle";

dstobj.contenticon = cfgobj.contenticon || "fa-exclamation-circle";

if (cfgobj.canclose ==undefined)

else

dstobj.autoclosetimer = cfgobj.autoclosetimer || -1;

dstobj.okbtnfunction = cfgobj.okbtnfunction || function

() ;

dstobj.closebtnfunction = cfgobj.closebtnfunction || function

() ;

dstobj.autoclosetimerid = -1;

dstobj.autoclosefunction = cfgobj.autoclosefunction || function

() ;

//儲存layer返回的彈層id

dstobj.winid = -1;}/*

* * myalert物件建構函式

* @param cfgobj myalert配置物件 */

function

myalert(cfgobj)

var $basejq = buildpopup(this

); /**

* 實際彈窗部分

*/var $popup_dom =$basejq;

this.winid =layer.open();

if (this

.canclose) ,

this

.autoclosetimer);}}

};}

.layui-layer .alert-div .alert-div .title .alert-div .title .icon .alert-div .title .text .alert-div .title .icon-close .alert-div .content .alert-div .content .icon .alert-div .content .text1 .alert-div .content .text2 .alert-div .control .alert-div .control .btn-base

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

title

>

title

>

<

link

rel="stylesheet"

href

="content/bootstrap.css"

/>

<

link

rel="stylesheet"

href

="content/font-awesome.css"

/>

<

link

rel="stylesheet"

href

="layer/skin/default/layer.css"

/>

<

link

rel="stylesheet"

href

="content/trml-myalert.css"

/>

head

>

<

body

>

<

div

class

="container"

style

="margin-top: 20px;"

>

<

input

type

="button"

class

="btn btn-primary btn-test1"

value

="測試1"

/>

div>

<

script

src="scripts/jquery-3.1.1.js"

>

script

>

<

script

src="scripts/bootstrap.js"

>

script

>

<

script

src="layer/layer.js"

>

script

>

<

script

src="scripts/trml-myalert-jq.js"

>

script

>

<

script

>$("

.btn-test1

").click(

function

() ,

autoclosetimer:

10000

, autoclosefunction:

function

() ,

closebtnfunction:

function

() });

tstalert.show();

});script

>

body

>

html

>

Bootstrap 大叔封裝的彈層

回到目錄 對於bootstrap的彈層,外掛程式有很多,今天主要用的是它自帶的功能,通過bootstrap提供的模式視窗來實現的,而大叔主要對使用方法進行了封裝,開發人員可以自己動態傳入彈層的 內容,可以控制按鈕的顯示與隱藏,使用者通過 擴充套件方法對彈層進行生成,然後使用a標籤進行呼叫 具體使用很...

Bootstrap被封裝的彈層

對於bootstrap的彈層,外掛程式有很多,今天主要用的是它自帶的功能,通過bootstrap提供的模式視窗來實現的,而小編主要對使用方法進行了封裝,開發人員可以自己動態傳入彈層的 內容,可以控制按鈕的顯示與隱藏,使用者通過 擴充套件方法對彈層進行生成,然後使用a標籤進行呼叫 具體使用很簡單 ht...

Layer彈層(父子傳值,兄弟傳值)

需求 最外面列表介面點修改彈出layera介面,再點選layera介面中的選擇地圖座標按鈕彈出layerb地圖介面 這個過程涉及到的 1 layera將座標傳給layerb,layerb在地圖上顯示座標。2 layerb選完座標點選確定後,地圖關閉,layerb將座標傳回layera 列表介面點選修...