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& ...
随机推荐
- angularJ表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- 转载 Servlet3.0中使用注解配置Servle
转载地址:http://www.108js.com/article/article10/a0021.html?id=1496 开发Servlet3的程序需要一定的环境支持.Servlet3是Java ...
- Android-项目介绍
一个.net开发人员 在了解android项目只能凭自己的理解慢慢来了! 新建项目 右击 New-JAVA Application Project 傻瓜似的下一步骤填写每一步 文件介绍 Android ...
- Nhiberate (一)
严重参考感谢:@wolfy 操作数据库一直都是直接写SQL语句, 接触的ORM框架也不多,新项目要用数据库,数据库访问采用NHibernate. 1. NHibernate 是基于.Net 的针对关系 ...
- SpringMVC源码剖析(一)- 从抽象和接口说起
SpringMVC作为Struts2之后异军突起的一个表现层框架,正越来越流行,相信javaee的开发者们就算没使用过SpringMVC,也应该对其略有耳闻.我试图通过对SpringMVC的设计思想和 ...
- 连接弹性和命令拦截的 ASP.NET MVC 应用程序中的实体框架
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 上篇博客我们学习了EF 之 MVC 排序,查询,分 ...
- IDEA14下多jdk编译时,enum不支持;多个project共用在一个workplace下每个module时引用外部包
idea多个工程如何在一个项目中管理: 把多个多个项目放在一个叫work目录下,那么打开IntelliJ IDEA编译器,点击菜单 File->Open...,选择刚刚的work目录,即可. 在 ...
- Linux:宿主机通过桥接方式连接的VMware内部Linux14.04虚拟机(静态IP)实现上网方案
首先,我们要弄清楚三种常见的连接方式中的桥接方式的网络结构: .bridged(桥接模式) 在这种模式下,VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机,它可以访问网内任何一台机器.在桥 ...
- java名词解释
依赖注入 DI 面向切面编程 AOP 简单java对象 POJO -- JavaBean(spring称呼) 企业级javabean EJB
- 分列:将excel单元格的内容拆分为两列
提要:处理excel数据时有时需要把单元格的内容拆分为两列,可能方便外部软件的链接,可能使数据显示更明晰等等,有人说直接剪切加粘贴不就可以了吗,但是有时数据过多,这样处理很不效率,网上搜索的方法说插入 ...