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 相关文章推荐
jquery DOM操作 基于命令改变页面
May 06 Javascript
jcrop基本参数一览
Jul 16 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
详解React路由传参方法汇总记录
Nov 29 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
JS弹出窗口代码大全(详细整理)
2012/12/21 Javascript
关于extjs4如何获取grid修改后的数据的问题
2013/08/07 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
毕业生造价工程师求职信
2013/10/17 职场文书
人力资源管理专业学生自我评价
2013/11/20 职场文书
财产保全担保书范文
2014/04/01 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript