素材牛VIP会员

纯JS弹出对话框层提示插件mh_dialog.js

 所属分类:网页特效-UI/布局/瀑布流,悬浮层/弹出层

 浏览:3354次  评论:3次  更新时间:2016-07-26
牛币素材VIP可免积分下载
纯JS弹出对话框层提示插件mh_dialog.js兼容IE6
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:以前分享的是jquery插件,现在用原生javascript写一个,现在分享给大家用

详细介绍

安装方法:

载入唯一JS文件

<script type="text/javascript" src="mh_dialog/js/mh_dialog.js"></script>

调用方法:

<a class="a" href="javascript:mh_dialogShow('mh_success','更新成功!');">提示更新成功</a>
<a class="a" href="javascript:mh_dialogShow('mh_loading','内容加载!');">提示内容加载</a>
<a class="a" href="javascript:mh_dialogShow('mh_warning','输入有误!');">提示输入有误</a>
<a class="a" href="javascript:mh_dialogShow('mh_error','更新失败!');">提示更新失败</a>
<a class="a" href="javascript:mh_dialogShow('mh_success','更新成功!',2,true);">提示更新成功2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_loading','内容加载!',2,true);">提示内容加载2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_warning','输入有误!',2,true);">提示输入有误2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_error','更新失败!',2,true);">提示更新失败2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_success','更新成功!',2,true,'http://www.sucainiu.com');">提示更新成功2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:mh_dialogShow('mh_loading','内容加载!',2,true,'http://www.sucainiu.com');">提示内容加载2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:mh_dialogShow('mh_warning','输入有误!',2,true,'http://www.sucainiu.com');">提示输入有误2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:mh_dialogShow('mh_error','更新失败!',2,true,'http://www.sucainiu.com');">提示更新失败2秒后自动关闭后跳转url</a>

CSS样式在mh_dialog.js里面查看或修改

var cssText = "html,body{width:100%;height:100%;margin:0;padding:0;}#mh_layer{background-color:#000;position:fixed;left:0;top:0;width:100%;height:100%;z-index:999999;display:none;background-color:rgba(0,0,0,0.6);}#mh_dialog{width:200px;height:100px;text-align:center;border-radius:8px;position:fixed;left:50%;top:50%;margin-left:-106px;margin-top:-56px;z-index:10000000;background-color:#fff;background-repeat:no-repeat;line-height:140px;font-size:14px;font-weight:bold;display:none;letter-spacing:1px;}.mh_success{background-image:url('mh_dialog/images/success.png');color:#1fce11;background-size:32px 32px;background-position:center 20px;border:6px #1fce11 solid;}.mh_loading{background-image:url('mh_dialog/images/loading.gif');color:#333333;background-size:50px 50px;background-position:center 15px;border:6px #333333 solid;}.mh_warning{background-image:url('mh_dialog/images/warning.png');color:#F90;background-size:32px 32px;background-position:center 20px;border:6px #F90 solid;}.mh_error{background-image:url('mh_dialog/images/error.png');color:#F00;background-size:32px 32px;background-position:center 20px;border:6px #F00 solid;}";

根据自身需求,修改对应的CSS样式即可。很简单但非常的实用,本站就用的这个效果


相关素材 - UI/布局/瀑布流,悬浮层/弹出层

讨论这个素材(3)回答他人问题或分享使用心得会奖励牛币

飞***猪  
2016年07月29日

整个站把这个孝感整合的挺好的,风格很搭!

飞***猪:评论一下
回复
华***n  
2017年12月25日

还不错 感谢分享

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)