所属分类:网页特效-UI/布局/瀑布流,悬浮层/弹出层
安装方法:
载入唯一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样式即可。很简单但非常的实用,本站就用的这个效果