jquery实现弹出窗口效果的实例代码


Posted in Javascript onNovember 28, 2013

JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来。

其大致步骤为:

•创建一个装载弹出窗口的div

<html>
  <head>
    <title>jQuery实例1:浮动窗口</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script>
    <mce:script type="text/javascript" src="jslib/jquerywin.js" mce_src="jslib/jquerywin.js"></mce:script>
    <link type="text/css" rel="stylesheet" href="css/win.css" mce_href="css/win.css">
  </head>
  <body>
  </body>
    <a onclick="showWin()" href="#" mce_href="#">弹出窗口</a>
    <div id="win">
        <div id="title">我是标题栏!<span id="close" onclick="hide()">X</span></div>
        <div id="content">我是一个窗口!</div>
    </div>
</html>

•创建相应的css文件将其显示为一个弹出窗口
#win{
    /*边框*/
    border:1px red solid;
    /*窗口的高度和宽度*/
    width : 300px;
    height: 200px;
    /*窗口的位置*/
    position : absolute;
    top : 100px;
    left: 350px;
    /*开始时窗口不可见*/
    display : none;
}
/*控制背景色的样式*/
#title{
    background-color : blue;
    color : red;
    /*控制标题栏的左内边距*/
    padding-left: 3px;
}
#cotent{
    padding-left : 3px;
    padding-top :  5px;
}
/*控制关闭按钮的位置*/
#close{
    margin-left: 188px;
    /*当鼠标移动到X上时,出现小手的效果*/
    cursor: pointer;
}

•创建相应的JavaScript文件来操作窗口的显示
function showWin(){
    /*找到div节点并返回*/
    var winNode = $("#win");
   //方法一:利用js修改css的值,实现显示效果
   // winNode.css("display", "block");
   //方法二:利用jquery的show方法,实现显示效果
   // winNode.show("slow");
    //方法三:利用jquery的fadeIn方法实现淡入
    winNode.fadeIn("slow");
}
function hide(){
    var winNode = $("#win");
    //方法一:修改css的值
    //winNode.css("display", "none");
    //方法二:jquery的fadeOut方式
    winNode.fadeOut("slow");
    //方法三:jquery的hide方法
    winNode.hide("slow");
}
Javascript 相关文章推荐
js更优雅的兼容
Aug 12 Javascript
js中有关IE版本检测
Jan 04 Javascript
javascript与有限状态机详解
May 08 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
理解AngularJs指令
Dec 10 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
asm.js使用示例代码
Nov 28 #Javascript
jquery实现动态菜单的实例代码
Nov 28 #Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 #Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 #Javascript
jQuery处理xml格式的返回数据(实例解析)
Nov 28 #Javascript
使用js写的一个简易的投票
Nov 27 #Javascript
juery框架写的弹窗效果适合新手
Nov 27 #Javascript
You might like
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php rsa加密解密使用详解
2015/01/14 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php桥接模式应用案例分析
2019/10/23 PHP
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python中map、any、all函数用法分析
2015/04/21 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
python实现飞机大战小游戏
2019/11/08 Python
python列表推导式入门学习解析
2019/12/02 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python利用platform模块获取系统信息
2020/10/09 Python
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
迟到检讨书1000字
2014/01/15 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
公司总经理岗位职责
2015/04/01 职场文书
员工旷工检讨书
2015/08/15 职场文书
小学生教师节广播稿
2015/08/19 职场文书
教师岗位说明书
2015/09/30 职场文书
2016猴年春节问候语
2015/11/11 职场文书