html 通用 遮罩弹出层 弹出后 支持跳转页面
//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 通用 遮罩弹出层 弹出后 支持跳转页面的更多相关文章
- form表单提交到Servlet后,弹出对话框,然后在跳转页面
在Servlet中添加一下代码即可 out.print("<script>alert('添加成功!');window.location='index.jsp';</scri ...
- zDiaLog弹出层
zDiaLog弹出层 立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- jQuery点击自身以外地方关闭弹出层
转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...
- Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
- 获取layer.open弹出层的返回值
正在开发的车联网项目用到了layer API.当我在开发“新建电子围栏”的时候需要弹出地图,用户在地图中画一个区域,最后将这个弹出层的数据返回给原页面.下面是我的实现过:程: 触发弹出层的代码: la ...
- 【position也可以很复杂】当弹出层遇上了鼠标定位(下)
前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...
- 【position也可以很复杂】当弹出层遇上了鼠标定位(上)
前言 周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...
- div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
随机推荐
- centos升级支持到C++11, gcc4.8.2
升级到4.8[这个应该是目前最新的啦,不过网上查的话已经到5.2啦,感觉落后一点比较稳,当然还有就是这个版本是新的里面使用最多的] wget http://people.centos.org/tru/ ...
- Unit05 - 抽象类、接口和内部类(上)
Unit05 - 抽象类.接口和内部类(上) 1.static final常量: 1)必须声明同时初始化 2)通过类名来访问,不能被改变 3)建议:常量名所有字母都大写(多个单词间用_) 4) ...
- Vue 双层嵌套
这种的需要双层嵌套. 代码: <table id="ict-table" class="ict-table ict-report-table blue-theme& ...
- HTTPS强制安全策略-HSTS协议阅读理解
https://developer.mozilla.org/en-US/docs/Web/Security/HTTP_strict_transport_security [阅读理解式翻译,非严格遵循原 ...
- c#读取Word模板,利用书签替换内容包括表格
//生成WORD程序对象和WORD文档对象 Microsoft.Office.Interop.Word.Application appWord = new Microsoft.Office.Inter ...
- Java Servlet(九):转发请求与重定向请求区别
转发: <% pageContext.setAttribute("pageContextAttr", "pageContextAttribute"); r ...
- JQuery MultiSelect(左右选择框)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 杭电oj 1069 Monkey and Banana 最长递增子序列
Monkey and Banana Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- Java中内存中的Heap、Stack与程序运行的关系
堆和栈的内存管理 栈的内存管理是顺序分配的,而且定长,不存在内存回收问题:而堆 则是随机分配内存,不定长度,存在内存分配和回收的问题:堆内存和栈内存的区别可以用如下的比喻来看出:使用堆内存就象是自己动 ...
- java中如何获取昨天的当前日期
在java里,获取昨天的当前日期,可以采用calendar来做,也可以采用date来做:如下: 1.采用calendar来做: Calendar cal=Calendar.getInstance(); ...