js jquery 通用 簡單的JS 提示框

2022-03-08 03:49:56 字數 1796 閱讀 1284

1、該外掛程式不需要依賴 jquery,僅僅使用了原生js

2、簡單、通用、可自定義修改樣式、支援等待n秒消失、支援消失後跳轉其他url , 功能還是比較完善的。

3、不廢話,上**: (我存放的位置在 /public/plugins/mh_dialog/   下,分別存放js 和 image )。

js:

/*

* * 名稱:漫畫原創彈出對話方塊提示層外掛程式mh_dialog

* 日期:2015-05-14 */

varmh_timer;/**

* @description 頁面載入時建立遮罩層和對話方塊層

* @date 2015-05-14 */

window.onload=function

()#mh_layer#mh_dialog.success.loading.warning.error";

var csstext = "html,body#mh_layer#mh_dialog.success.loading.warning.error";

//初始化外掛程式樣式

createstyle(csstext);

//建立遮罩層

var mh_layer_div = document.createelement("div");

mh_layer_div.setattribute("id","mh_layer");

//建立對話方塊層

var mh_dialog_div = document.createelement("div");

mh_dialog_div.setattribute("id","mh_dialog"); }/*

* * @description 動態建立遮罩層和對話方塊層的樣式

* @date 2015-05-14 */

function

createstyle(content)

else

//獲取頭部標籤物件

var heads = document.getelementsbytagname("head");

if(heads.length)

else}/*

* * @description 彈出對話方塊層

* @param classname 樣式名稱(成功:success,失敗:error,載入:loading,警告:warning)

* @param content 提示內容

* @param timeout 定時關閉時間

* @param flag 是否自動關閉

* @param url 對話方塊關閉時跳轉的url

* @return */

function

showdialog(classname,content,timeout,flag,url),timeout*1000);

}}/*

* * @description 關閉對話方塊層

* @param url 關閉層時跳轉的url

* @return */

function

mh_dialogclose(url)

}

2、html使用:

引入該外掛程式js:

//

提示成功,且跳轉至qq互聯

showdialog('success','恭喜您,提交成功!',2,true,"tencent://message/?uin=&site=");

3、效果:

js jquery 通用 簡單的JS 提示框

1 該外掛程式不需要依賴 jquery,僅僅使用了原生js 2 簡單 通用 可自定義修改樣式 支援等待n秒消失 支援消失後跳轉其他url 功能還是比較完善的。3 不廢話,上 我存放的位置在 public plugins mh dialog 下,分別存放js 和 image js 名稱 漫畫原創彈出對...

js雜記 js jquery實戰雜記 1

1 jquery中event.originalevent屬性 該方法的作用是指向原始的事件物件 2 js滾輪事件 mousewheel dommousescroll ie chrome mousewheel firefox dommousescroll ie chrome event.wheelde...

web頁面水印(簡單 通用 強大 純js)

web頁面水印 簡單 通用 強大 純js 呼叫與效果 fnwatermark textlist 您好,歡迎回家!水印 param options style textlist 文字集合,每一項為字串型別,每一項佔一行 xpadding number 左邊距 右邊距 ypadding number 上...