//showMessage 提示的内容默认为空必填   buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认  url:跳转链接  传入""为默认  不跳转
function showAlert(showMessage,buttonText,url)
{
var bottonHtml="";
if(url=="")
{
bottonHtml="<div class='qr_btn' style='width:80%;font:15px/35px \"微软雅黑\";background:#94c120;color:#fff;margin:0 auto;border-radius: 6px;'>"+(buttonText==""?'确定':buttonText)+"</div>";
}
else
{
bottonHtml="<div class='qr_btn' style='width:80%;font:15px/35px \"微软雅黑\";background:#94c120;color:#fff;margin:0 auto;border-radius: 6px;'><a href='"+url+"'>"+(buttonText==""?'确定':buttonText)+"</a></div>"
}
var html="<div class='alert_win' style='display:none;width:80%;display:none;padding-bottom:16px;position:absolute;z-index: 9999;text-align: center;border-radius:10px;background:#fff;border:1px solid #c6c6c6;left:50%;top:50%;'>"+
"<div class='til' style='font: 16px/24px 微软雅黑;width: 80%; margin: 20px auto 18px;'>"+showMessage+"</div>"+
bottonHtml+
"<div class='close_btn' style='width:16px;height:16px;font:bold 15px/16px airal;color:#999;position:absolute;top:5px;right:5px;background:none;'>×</div>"+
"</div>"+
"<div class='alert_bg' style='width:100%;height:100%;position:fixed;background:rgba(0,0,0,0.3);top:0;left:0;display: none;'></div>";
$("body").append(html);
var oT_1=($('.alert_win').height())/2;
var oL_1=($('.alert_win').width())/2;
$('.alert_win').css({
'marginTop':-oT_1+'px',
'marginLeft':-oL_1+'px'
});
//$('.til').html(showMessage);
$('.alert_win').show();
$('.alert_bg').show();
//qr_btn 关闭
$('.qr_btn').click(function()
{
$('.alert_win').hide();
$('.alert_bg').hide();
});
//down_app 关闭
$('.down_app').click(function(){
$('.alert_win').hide();
$('.alert_bg').hide();
}); $('.close_btn').click(function(){
$('.alert_win').hide();
$('.alert_bg').hide();
});
}

html 通用 遮罩弹出层 弹出后 支持跳转页面的更多相关文章

  1. form表单提交到Servlet后,弹出对话框,然后在跳转页面

    在Servlet中添加一下代码即可 out.print("<script>alert('添加成功!');window.location='index.jsp';</scri ...

  2. zDiaLog弹出层

    zDiaLog弹出层  立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...

  3. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  4. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  5. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  6. 获取layer.open弹出层的返回值

    正在开发的车联网项目用到了layer API.当我在开发“新建电子围栏”的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面.下面是我的实现过:程: 触发弹出层的代码: la ...

  7. 【position也可以很复杂】当弹出层遇上了鼠标定位(下)

    前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...

  8. 【position也可以很复杂】当弹出层遇上了鼠标定位(上)

    前言 周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...

  9. div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

随机推荐

  1. centos升级支持到C++11, gcc4.8.2

    升级到4.8[这个应该是目前最新的啦,不过网上查的话已经到5.2啦,感觉落后一点比较稳,当然还有就是这个版本是新的里面使用最多的] wget http://people.centos.org/tru/ ...

  2. Unit05 - 抽象类、接口和内部类(上)

    Unit05 - 抽象类.接口和内部类(上) 1.static final常量:  1)必须声明同时初始化  2)通过类名来访问,不能被改变  3)建议:常量名所有字母都大写(多个单词间用_)  4) ...

  3. Vue 双层嵌套

    这种的需要双层嵌套. 代码: <table id="ict-table" class="ict-table ict-report-table blue-theme& ...

  4. HTTPS强制安全策略-HSTS协议阅读理解

    https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security [阅读理解式翻译,非严格遵循原 ...

  5. c#读取Word模板,利用书签替换内容包括表格

    //生成WORD程序对象和WORD文档对象 Microsoft.Office.Interop.Word.Application appWord = new Microsoft.Office.Inter ...

  6. Java Servlet(九):转发请求与重定向请求区别

    转发: <% pageContext.setAttribute("pageContextAttr", "pageContextAttribute"); r ...

  7. JQuery MultiSelect(左右选择框)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 杭电oj 1069 Monkey and Banana 最长递增子序列

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...

  9. Java中内存中的Heap、Stack与程序运行的关系

    堆和栈的内存管理 栈的内存管理是顺序分配的,而且定长,不存在内存回收问题:而堆 则是随机分配内存,不定长度,存在内存分配和回收的问题:堆内存和栈内存的区别可以用如下的比喻来看出:使用堆内存就象是自己动 ...

  10. java中如何获取昨天的当前日期

    在java里,获取昨天的当前日期,可以采用calendar来做,也可以采用date来做:如下: 1.采用calendar来做: Calendar cal=Calendar.getInstance(); ...