オリジナル、自分でシンプルかつ実用的なヒントウィジェットを行い、互換性は基本的に互換性のある、非常に良いです！

次のように達成される効果は以下のとおりです。

jquery.message.box.jsのウィジェットコードは次のとおりです。

/ *
      メッセージ    メッセージ
        のURL     ジャンプURL、3つの値が存在するから選択することができる（{1：、URLアドレスジャンプを指定し2：前のページに戻り、3：スキップしない}）
       遅らせ    プロンプト時間値の
        タイプ    プロンプトを三つの値から選択することができる（{1：プロンプトタイプ2を左：タイプヒントダウン、3：プロンプト中心}）
optionExtend     主にあなたのバルーンをしたいメッセージを拡張するために使用されるユーザ（の予約済みオプションの拡張CSSの効果）
 
* / 
$の.Fn。メッセージボックス =機能（メッセージ、URL、ディレイ、タイプ、optionExtend）{ 
    VARオプション= { 
        style_msgprint： ""、
        style_tipsyinner： ""、
        style_tipsyarrow： ""、
        スタイル： "" 
    }
    returnurl = VAR ''、messagebox_timer、obj_msgprint = ''; 
    // obj_msgprint = "msgprint_"; 
    obj_msgprint = "msgprint_" +のparseInt（Math.random（）* 1000）; 
    optionExtend = $ .extend（{}、オプション、optionExtend || {}）; //合成パラメータオプション形成するために組み合わさ継承
    ）てclearTimeout（messagebox_timerを; //消去タイマー

    // $（ "＃" + obj_msgprint）.remove（）; 

    VAR m_body = $（この）; 
    遅延=（typeof演算遅延== "未定義" 5000：？遅延）; // プロンプト時間値
    にreturnurl = URL、URLが//戻さ

    VARのSTRを; 
    // テキストボックス内に配置、左アラートタイプ 
    IF（タイプ== 1）{ 
        = optionExtend.style_msgprint "フロート：左;マージン：0PX;パディング：10pxの0PX;表示：インラインブロック"; 
        optionExtendを。style_tipsyarrow = "幅：0PX;";
    } 
// 位于文本框、向下提示类型
     他の場合（タイプ== 2）{ 
        
        optionExtend.style_msgprint = "パディング：0PX"。
        optionExtend.style_tipsyarrow = "幅：18px;トップ：-6px"; 
    } 

    STR = ' < DIV ID =' + obj_msgprint + 'クラス= "ほろ酔いほろ酔い-N" スタイル= "' + optionExtend.style_msgprint + ' " > 
           < DIV クラス= "ほろ酔い-inner1" スタイル="' + optionExtend.style_tipsyinner +「」> 
           < スパンクラス= 『ほろ酔い、矢印1』スパン> '+メッセージ+' </ DIV > 
          </ DIV > 「; 
    m_body.append（STR）。
 
        VAR dom_obj =のdocument.getElementById（obj_msgprint）。
        VAR ext_width = $（ "＃" + obj_msgprint）.ATTR（ "スタイル"、optionExtend.style）。
        dom_obj.style.top =（document.documentElement.scrollTop +（document.documentElement.clientHeight - $（ "＃" + obj_msgprint）.height（））/ 2）+ "PX"。
        dom_obj.style.left =（document.documentElement.scrollLeft +（document.documentElement.clientWidth - $（ "＃" + obj_msgprint）.width（））/ 2）+ "PX"。
    } 

    $（ "＃" 
        messagebox_timer =のsetTimeout（messagebox_out、遅延）
    }）。

    関数messagebox_out（）{ 
        場合（にreturnurl ==未定義||にreturnurl == ''）{ 
            $（ "＃" + obj_msgprint）.fadeOut（1000年、
            }）; 
        } 
        （にreturnurl == "バック"）であれば{ 
            this.history.back（-1）
        }もしそうでなければ（！にreturnurl = "" &&にreturnurl =不定）{ 
            this.location.href =にreturnurl 
        } 
    } 
}。

tipsy.cssのスタイルのコードは次のとおりです。

.tipsy { padding-top: 9px; font-size: 14px; position: absolute; margin-top: 10px; z-index: 100000; }
.tipsy-inner { background-color: #333; color: white; text-align: center;box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.tipsy-inner { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.tipsy-arrow { position: absolute; background: url('./images/archivePopUp-tip.png') no-repeat top center;}

.tipsy-inner1 { padding: 10px; background-color: #838383; color: white;text-align: center; 
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
}
.tipsy-inner1 { border-radius: 5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
.tipsy-arrow1 { position: absolute; background: url('./images/archivePopUp-tip1.png') no-repeat top center; height: 17px; }
.tipsy-n .tipsy-arrow1 { top: 0; left: 46%;}

HTMLの次のように呼び出すコード：

<!DOCTYPE html>
<html>
<head>
    <title>提示 jquery.message.box Demo</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.message.box.js"></script>
    <link rel="stylesheet" type="text/css" href="tipsy.css" />
    <script>
        $(function () {
            //左侧 提示
            $("#btn").click(function () {
                $("#span1").messagebox("亲,请输入用户名!", "", 1000, 1, { style_tipsyinner: "padding:10px;width:120px;background:#336699" });
                $("#span2").messagebox("亲,请输入密码!", "", 1000, 1, { style_tipsyinner: "padding:10px;width:120px;background:#336699" });

            })
            //居下 提示
            $("#btn2").click(function () {
                $("#div1").messagebox("亲,请输入用户名!", "", 1000, 2, { style_tipsyinner: "width:180px;padding:14px;" });
                $("#div2").messagebox("亲,请输入密码!", "", 1000, 2, { style_tipsyinner: "width:180px;padding:14px;" });
            })
            //居中 提示 
            $("#btn3").click(function () {
                $("body").messagebox("亲,这里是居中显示!", "http://www.baidu.com", 500, 3, { style_msgprint: "width:200px;", style_tipsyinner: "padding:20px;background:#336699", style: "width:200px;" });
            })
        })
    </script>
</head>
<body>
    <div id="message">
    </div>

    <!--左侧提示-->
    <div style="height: 38px;">
        <input type="text" id="userName" style="width: 200px; height: 32px;" /><span id="span1"></span>
    </div>
    <br />
    <div style="height: 38px;">
        <input type="text" id="userName" style="width: 200px; height: 32px;" /><span id="span2"></span>
    </div>
    <br />
    <input type="button" value="左侧提示" id="btn" style="width: 120px; height: 42px; background: #005588;
        border: none; color: white;" />
    <br />
    <br />
    <!--左侧提示-->

    <!--下侧提示-->
    <div>
        <input type="text" style="width: 200px; height: 32px;" /><div id="div1">
        </div>
        </br>
        <input type="text" style="width: 200px; height: 32px;" /><div id="div2">
        </div>
    </div>
    <br />
    <br />
    <input type="button" value="向下提示" id="btn2" style="width: 120px; height: 42px; background: #336699;
        border: none; color: white;" />
    <!--下侧提示-->
    <br />
    <br />

    <!-----居中提示------->
    <input type="button" value="居中提示" id="btn3" style="width: 120px; height: 42px; background: #ff6600;
        border: none; color: white;" />
    <!-----居中提示------->
</body>
</html>

ます。https：//www.cnblogs.com/Kummy/archive/2013/05/02/3054274.htmlで再現

オリジナル、自分でシンプルかつ実用的なヒントウィジェットを行い、互換性は基本的に互換性のある、非常に良いです！

おすすめ