我的前端工具集（五）提示工具之模態窗提示

liuyuhang原創，未經允許禁止轉載

1、需求

很多頁面操作都需要提示，比如操作成功，操作失敗之類。

總不能沒事就console.log或者alert吧。

所以一個操作提示很重要

2、模態窗提示

bootstarp的模態窗可以稍加修改作為提示。主要有兩重功能：

　　①提示點選其他地方可消失，程式碼比較簡單。

　　②帶有遮罩，提示效果比較明顯。

3、html程式碼

　　自己引bootstrap和jquery

    <!--
 
 提示用模態框 -->
    <div class="modal fade" id="modalTips" tabindex="-1" role="dialog">
        <div style="width:95%;margin-left:2.5%;margin-top:20px">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
 
>
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
                            <h4 class="modal-title" id="modalTipsTitle">title</h4>
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                            <
 
button type="button" id="tipsTimeOut" class="btn btn-default close pull-right" data-dismiss="modal" aria-hidden="true">關閉</button>
                        </div>
                    </div>
                </div>
                <div class="modal-body" id="modalTipsBody"></div>
            </div>
        </div>
    </div>

    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default" onclick="topTipModal(132123123,123123123123,4000)">
            <span class="glyphicon glyphicon-refresh" style="color: black;padding-right:2px;"></span>測試
        </button>
    </div>

4、js程式碼

        /**
         * 頂部顯示提示的模態框
         * @param:title,提示框的標題內容
         * @param:tips,提示框的提示內容
         * @param:speed,提示框自動消失時間,1000為1秒，0-1000會自動轉為2000,60秒以上關閉，小於0則一分鐘後關閉
         */
        function topTipModal(title, tips, speed) { //modalTipsTitle,modalTipsBody
            $("#modalTips #modalTipsTitle").html(title);
            $("#modalTips #modalTipsBody").html(tips);
            $("#modalTips").modal("show");
            var speed = speed;
            if (parseInt(speed) > 0 && parseInt(speed) < 1000) { //1秒之內看不見啥,改為2秒
                speed = 2000;
                setTimeout(function() {
                    $("#modalTips").modal("hide");
                }, speed);
            } else if (parseInt(speed) >= 1000 && parseInt(speed) < 60000) { //一分鐘以內都顯示
                setTimeout(function() {
                    $("#modalTips").modal("hide");
                }, speed);
            } else { //tipsTimeOut
                speed = 60000;
                setTimeout(function() { //超過1分鐘自動關閉
                    $("#modalTips").modal("hide");
                }, speed);
            }
            var timer = setInterval(function() {
                $("#modalTips #tipsTimeOut").html(speed / 1000 + "秒後關閉");
                speed = speed - 1000;
                if (speed < 0) {
                    clearTimeout(timer);
                    $("#modalTips #tipsTimeOut").html("關閉");
                }
            }, 1000);
        }

5、呼叫與測試

以上！