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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
jQuery 使用手册(六)
Sep 23 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
详解js闭包
Sep 02 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
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
如何使用Strace调试工具
2013/06/03 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
thinkphp分页集成实例
2017/07/24 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
深入了解Vue.js 混入(mixins)
2020/07/23 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
阿里旅行:飞猪
2017/01/05 全球购物
计算机毕业生自荐信范文
2014/03/23 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers