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 常用函数库详解
Oct 21 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
JavaScript判断数组类型的方法
Oct 23 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 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
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php-msf源码详解
2017/12/25 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
php集成开发环境详解
2019/09/24 PHP
鼠标图片振动代码
2006/07/06 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
浅析jquery的js图表组件highcharts
2014/03/06 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
基于JS实现移动端左滑删除功能
2017/07/28 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
对Python3中的input函数详解
2018/04/22 Python
Python colormap库的安装和使用详情
2020/10/06 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
公司建议书怎么写
2014/05/15 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
财政局长个人总结
2015/03/04 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers