個人前端工具集（五）提示工具之模態窗提示

個人前端工具集（五）提示工具之模態窗提示

 

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

 

目錄

個人前端工具集

 

一、需求

 

不少頁面操做都須要提示，好比操做成功，操做失敗之類。

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

 

因此一個操做提示很重要

 

二、模態窗提示

bootstarp的模態窗能夠稍加修改做爲提示。主要有兩重功能：

　　①提示點擊其餘地方可消失，代碼比較簡單。

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

 

三、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>

 

四、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);
        }

 

 

五、調用與測試

 

 

 

以上！