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

?

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 { //tipsTimeOutspeed = 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、調用與測試

?

?

?

以上！

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的我的前端工具集（五）提示工具之模态窗提示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。