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& ...
随机推荐
- 用apktool工具进行apk的编译和反编译
1.apktool下载安装 给一个2.0版的csdn地址:http://download.csdn.net/download/txj8612/7408775 下载后无需安装,直接解压缩,得到三个文件: ...
- angularJs之$watch监听属性变化访问后台
- git制作增量包用于更新代码
1 先找到指定的开始提交id,比如 05104e3475f63e1e49fbfcbd424a4a3801b95645 2 找到结束的提交id,比如 a0eb9bc6d4e1801062877fd435 ...
- 20145320 《Java程序设计》第1周学习总结
20145320 <Java程序设计>第1周学习总结 教材学习内容总结 第一章 Java最早是Sun公司的项目Green Project中编写Star7应用程序的程序语言,1995年5月2 ...
- transform scale 背景图片模糊怎么办?
transform: translateZ(0) scale(1, 1); 就是这样(摊手表情),不晓得什么原理.
- 前端Html和Css面试题
前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...
- SVN merge的主干,分支的相互合并操作
本文只研究了 在本地如何进行主干,分支的相互合并 的操作:从主干到分支,从分支到主干. 本地客户端工具是tortoisesvn 测试用例. 1.本地添加test文件夹 在test文件夹下分别建立tru ...
- Black World
- listivew 动态刷新单个item
使用ViewHolder来刷新某项数据,而不用每次都全部刷新数据. 继承BaseAdapter,新建ViewHolder类. public class TestListAdapter extends ...
- Hibernate框架的使用。。。
在lib文件夹里面导入Hibernate开发的架包和连接mysql,连接数据源c3p0的架包... 在src目录下建立Hibernate Configuration File(cfg.xml)的配置 ...