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:void(0)的作用示例介绍
Oct 28 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 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中$_SERVER的详细参数与说明
2008/07/29 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
Javascript实现的Map集合工具类完整实例
2015/07/31 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
jQuery选择器之属性筛选选择器用法详解
2017/09/19 jQuery
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
2020/08/07 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python 不以科学计数法输出的方法
2018/07/16 Python
Python中按值来获取指定的键
2019/03/04 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
Charlotte Tilbury美国官网:英国美妆品牌
2017/10/13 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
高三英语教学反思
2014/01/13 职场文书
团日活动总结报告
2014/06/25 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
老人节标语大全
2014/10/08 职场文书
综合管理员岗位职责
2015/02/11 职场文书
校本研修个人总结
2015/02/28 职场文书
超市收银员岗位职责
2015/04/07 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Vue router配置与使用分析讲解
2022/12/24 Vue.js