JQuery_jquery に基づくメッセージプロンプトボックス効果コード-jsチュートリアル-php.cn

JQuery_jquery に基づくメッセージプロンプトボックス効果コード

WBOY

リリース： 2016-05-16 18:04:25

オリジナル

1054 人が閲覧しました

詳細については、添付ファイルをダウンロードしてください
最初に効果を見てください:

成功提示错误提示警告信息

内容はすべて 1.58KB の js ファイルにまとめられています

コードをコピーしますコードは次のとおりです。

var returnurl = ''; messagebox_timer;
$.fn.messagebox = 関数 (メッセージ、URL、タイプ、遅延) {
clearTimeout(messagebox_timer);
var m_body = $(this) ;
遅延 = (遅延の種類 == "未定義" ? 5000 : 遅延);
戻り値 = url;
var box_style = '位置:絶対;表示:なし;z-index :1000;パディング: 10px 30px 10px 40px;';
switch (type) {
case 1: box_style = 'border:1px Solid Green;color:#090;background:url(../Icons/ok .png) 10px 10px 繰り返しなし #F1FEF2;';
case 0: box_style = 'border:1px Solid Red;color:#EE1010;background:url(../Icons/error.png) 10px 10px繰り返しなし #FDF8E8 ;'; ブレーク;
デフォルト: box_style = 'border:1px ソリッドオレンジ;カラー:オレンジ;背景:url(../Icons/warning.png) 10px 10px 繰り返しなし #FEFDE9;' ; ブレーク
}
var str = "

" m_body.append(str); var dom_obj = document.getElementById("msgprint");
var ext_width = $("#msgprint").width();
dom_obj.style.top = (document.documentElement. clientHeight - dom_obj.offsetHeight - $("#msgprint").height()) / 2) "px";
dom_obj.style.left = (document.documentElement.scrollLeft (document.documentElement.clientWidth - dom_obj.offsetWidth) - $("# msgprint").width()) / 2) "px";
$("#msgprint").fadeIn(1000, function () { messagebox_timer = setTimeout(messagebox_out, late) });
};
関数 messagebox_out() {
if (returnurl == 未定義 || returnurl == '') { $("#msgprint").fadeOut(1000) }
if (returnurl == "戻る" ) { this.history.back(-1) } else if (returnurl != "" && returnurl != unknown) { this.location.href = returnurl }
}

参照される js ファイル:

コードをコピーコードは次のとおりです。 script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">

ページコード:

コードをコピー

コードは次のとおりです。

ul>

成功、20 秒後にジャンプ

失敗、1 秒後に消えました

警告、デフォルトでは 5 秒後にバックオフします