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 相关文章推荐
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
js实现消息滚动效果
Jan 18 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
js实现菜单跳转效果
Dec 11 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
php下载远程文件类(支持断点续传)
2008/11/14 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
php 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python实现随机选择元素功能
2017/09/14 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
Python使用Matlab命令过程解析
2020/06/04 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
python链表类中获取元素实例方法
2021/02/23 Python
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
AOP的定义以及作用
2013/09/08 面试题
幼儿教师培训感言
2014/03/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
北京奥运会口号
2014/06/21 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
批评与自我批评范文
2014/10/15 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书