/** * 產生長度為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 列表介面點選修...