//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. rtl8723 2个 wlan

    安装8723bs.ko模块之后,生成了wlan0和wlan1,MAC地址一样. http://blog.csdn.net/djman007/article/details/46731335 解决方法: ...

  2. Android 线程的正确使用姿势

    进程优先级(Process Priority) 线程寄宿在进程当中,线程的生命周期直接被进程所影响,而进程的存活又和其优先级直接相关.在处理进程优先级的时候,大部分人靠直觉都能知道前台进程(Foreg ...

  3. 在UIScrollView的delegate方法判断滚动快慢

    // 这里做预加载 CGPoint currentOffset = scrollView.contentOffset; NSTimeInterval currentTime = [NSDate tim ...

  4. on-my-zsh agnoster 主题设置问题

    安装Menlo-Powerline字体补丁 https://gist.github.com/qrush/1595572/raw/417a3fa36e35ca91d6d23ac96107... 然后 c ...

  5. svg学习(七)polygon

    <polygon> 标签用来创建含有不少于三个边的图形. <?xml version="1.0" standalone="no"?> & ...

  6. composer--------初体验,如何安装,如何下载

    最近PHP里面比较火的一款框架laravel,想学一下看下这个框架到底哪里好.这款框架的中文官网激励推荐composer,没办法就去学了一些composer.结果整了半天,还不如看一段短视频学的容易. ...

  7. 用OOP设计以下场景。太阳发出太阳光,照射在墙壁上,在地面形成影子。

    首先分析出有哪些实体类,太阳.太阳光.墙壁.地面.影子 然后分析太阳应该继承自发光体类.太阳光继承自光类.墙壁继承自物体类 地面是一个承载影子的容器.

  8. jsp请求乱码问题

    首先尝试添加filter,以下是我的自定义filter,实现了Filter接口: package com.deplume.ssm.filter;import javax.servlet.*;impor ...

  9. 0523 Scrum 项目6.0

    团队名称:√3 团队目标:全力完成这次的项目 团队口号:我要改变世界,改变自己!!! 演讲稿:我们的产品 鸡汤精选 是为了解决 当下社会出现的太多的负能量使得人们的内心十分 的痛苦, 他们需要强大的正 ...

  10. ROS探索总结(三)——ROS新手教程【转】

    转自:http://blog.csdn.net/hcx25909/article/details/8811313 版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[-] 一ROS的 ...