东莞建筑建设网站建设,wordpress搭建商城网站,温州网站建设技术外包,个人网站备案 照片我的前端工具集#xff08;五#xff09;提示工具之模态窗提示 liuyuhang原创#xff0c;未经允许禁止转载 目录
我的前端工具集 1、需求 很多页面操作都需要提示#xff0c;比如操作成功#xff0c;操作失败之类。
总不能没事就console.log或者alert吧。 所以一个操作提…我的前端工具集五提示工具之模态窗提示 liuyuhang原创未经允许禁止转载 目录
我的前端工具集 1、需求 很多页面操作都需要提示比如操作成功操作失败之类。
总不能没事就console.log或者alert吧。 所以一个操作提示很重要 2、模态窗提示
bootstarp的模态窗可以稍加修改作为提示。主要有两重功能 ①提示点击其他地方可消失代码比较简单。 ②带有遮罩提示效果比较明显。 3、html代码 自己引bootstrap和jquery !-- 提示用模态框 --div classmodal fade idmodalTips tabindex-1 roledialogdiv stylewidth:95%;margin-left:2.5%;margin-top:20pxdiv classmodal-contentdiv classmodal-headerdiv classcol-lg-12 col-md-12 col-sm-12 col-xs-12div classcol-lg-10 col-md-10 col-sm-10 col-xs-10h4 classmodal-title idmodalTipsTitletitle/h4/divdiv classcol-lg-2 col-md-2 col-sm-2 col-xs-2button typebutton idtipsTimeOut classbtn btn-default close pull-right data-dismissmodal aria-hiddentrue关闭/button/div/div/divdiv classmodal-body idmodalTipsBody/div/div/div/divdiv classbtn-group btn-group-smbutton typebutton classbtn btn-default onclicktopTipModal(132123123,123123123123,4000)span classglyphicon glyphicon-refresh stylecolor: 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
