jquery弹出遮掩层效果【附实例代码】


Posted in Javascript onApril 28, 2016

找了个别人写的遮掩层进行改善,感觉效果还可以。

效果图:

jquery弹出遮掩层效果【附实例代码】

代码:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>tipswindown</title>
  <link href="css/tipswindown.css" rel="stylesheet" type="text/css" />
  <script src="js/jquery-1.8.js" type="text/javascript"></script>
  <script src="js/tipswindown.js" type="text/javascript"></script>
  <style type="text/css">
    #main{width:300px;margin:50px auto;font-family: Arial, Calibri;}
    #main .btn {width:150px;height:30px;line-height:30px;font-size:14px; vertical-align:middle; color: #333333; font-weight:bold; text-decoration:none; display:block; text-align:center;background: #CCC;}
    #main .btn:hover{vertical-align:middle; color: #fff; font-weight:bold; text-decoration:none;display:block; text-align:center;background: #333;}
  </style>
  <script type="text/javascript">
    $(function () {
      $("#DialogShow").click(function () {
        tipsWindown("CnBlogs", "id:dialog", "450", "200", "true", "", "true", "id");
      });
    })
    function Ok() {
      window.location.href = "http://www.cnblogs.com/";
    }
    function Cancel() {
      $("#windownbg").remove();
      $("#windown-box").fadeOut("1000", function () { $(this).remove(); });
    }
  </script>
</head>
<body>
<div id="main">
  <a href="javascript:void(0);" class="btn" id="DialogShow">DialogShow</a>
</div>
<div id="dialog" style="display:none";>
  <div class="dialogtext">
    <p>Please click on the ok button to go the http://www.cnblogs.com/ website and you should just wait. </p>
    <p>If you are accessing this page by mistake please click on the cancel link.</p>
</div>
  <div class="dislogbtn">
    <a href="javascript:void(0);" class="btn" id="Ok" onclick="Ok()">Ok</a>
    <a href="javascript:void(0);" class="btn" id="Cancel" onclick="Cancel()">Cancel</a>
  </div>
</div>  
</body>
</html>

以上这篇jquery弹出遮掩层效果【附实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
再论Javascript的类继承
Mar 05 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
onclick和onblur冲突问题的快速解决方法
Apr 28 #Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 #Javascript
JavaScript String 对象常用方法总结
Apr 28 #Javascript
JavaScript Math 对象常用方法总结
Apr 28 #Javascript
非常漂亮的相册集 使用jquery制作相册集
Apr 28 #Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 #Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 #Javascript
You might like
PHP邮箱验证示例教程
2016/06/01 PHP
PDO::setAttribute讲解
2019/01/29 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
AngularJS $injector 依赖注入详解
2016/09/14 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
详解各版本React路由的跳转的方法
2018/05/10 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python使用chardet判断字符编码
2015/05/09 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python 编程速成(推荐)
2019/04/15 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
工作保证书
2015/01/17 职场文书
元旦主持词开场白
2015/05/29 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang