jQuery 弹出div层
目的:使用jQuery弹出一个div窗口;这种效果经常应用于页面内容的展示,登录效果的实现。其实,实现这种效果有好多种方式;
效果如下:
代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用jQuery弹出div窗口</title> <script type="text/javascript" src="jquery-2.1.1/jquery-2.1.1.js"></script> <style> #win{ border:1px gray solid; /*窗口的高度和宽度*/ width : 300px; height: 200px; /*窗口的位置*/ position : absolute; top : 100px; left: 450px; /*开始时窗口不可见*/ display : none; } /*控制背景色的样式*/ #title{ background-color:#CCCCCC; color:#0000FF; padding-left:3px; } /*控制关闭按钮的位置*/ #close{ margin-left: 188px; /*当鼠标移动到关闭按钮上时,出现小手的效果*/ cursor: pointer; } </style> <script> function showWin(){ var winNode = $("#win"); //方法1:利用js修改css的值,实现显示效果 // winNode.css("display", "block"); //方法2:利用jquery的show方法,实现显示效果 // winNode.show("slow"); //方法3:利用jquery的fadeIn方法或slideDown方法实现动画效果 //winNode.fadeIn(2000); winNode.slideDown(2000); } function closeWin(){ var winNode = $("#win"); //方法1:修改css的值 //winNode.css("display", "none"); //方法2:jquery的hide方法 //winNode.hide("slow"); //方法3:使用jQuery的fadeOut或slideUp方法 //winNode.fadeOut("slow"); winNode.slideUp(2000); } </script> </head> <body> <div style="text-align:center; margin-top:50px"><a onClick="showWin()" href="#">弹出窗口</a> </div> <div id="win"> <div id="title">标题栏 <span id="close" onClick="closeWin()">关闭</span> </div> <div>这是弹出窗口的div内容;</div> </div> </body> </html>
jQuery 弹出div层的更多相关文章
- js弹出div层,弹出层页面底部出现UL出现一条线问题
整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...
- js点击弹出div层
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js弹出div层内容(按回退键关闭div层及遮罩)
<!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...
- 【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
- 工作当中实际运用(3)——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- jQuery弹出遮罩层效果完整示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 根据图中的盲点坐标,弹出div层
<div class="map_r" id="mapinfo" style="position: absolute; top: 20px; le ...
- 基于jquery ui修改的不依赖第三方的背景透明的弹出div
效果图: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- 【JS新手教程】弹出两层div,及在LODOP内嵌上层
前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...
随机推荐
- [LeetCode] 45. Jump Game II 解题思路
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- httpd与tomcat基于mod_jk整合
搞定在前面述, httpd与tomcat整合方式 当前已知的有 ajp_proxy,mod_jk.so jk connecteor连接器下载地址 http://archive.apache.org/d ...
- Swing UI - 可收起与开展内容面板实现演示
基于JAVA Swing实现的自定义组件可折叠的JPanel组件 基本思想: 可折叠面板,分为两个部分-头部面板与内容面板 头部面板– 显示标题,以及对应的icon图标,监听鼠标事件决定内容面板隐藏或 ...
- final(最终、修饰符)
/* final(最终.修饰符) final关键字的用法: 1. final关键字修饰一个基本类型的变量时,该变量不能重新赋值,第一次的值为最终的. 2. fianl关键字修饰一个引用类型变量时,该变 ...
- 【实验 1-1】编写一个简单的 TCP 服务器和 TCP 客户端程序。程序均为控制台程序窗口。
在新建的 C++源文件中编写如下代码. 1.TCP 服务器端#include<winsock2.h> //包含头文件#include<stdio.h>#include<w ...
- onActivityResult不执行 或者 onActivityResult的解决方法
开发人员都知道,可以通过使用 startActivityForResult() 和 onActivityResult() 方法来传递或接收参数.然而在一次使用中,还没等到被调用的 Activity 返 ...
- 《Effective C++ 》学习笔记——条款11
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- TO DO NOW——送给奋斗着的程序“猿”们
大家在我们的日常生活中是不是经常会遇到学习和工作效率低,不能够按照自己的计划有条不紊地按时.按点儿的完成自己的任务呢?是不是还在为此而头疼不堪呢?好吧, 那是你执行力有问题.那么究竟什么是执行力?怎样 ...
- mysql索引简单介绍
索引从本质上来说也是一种表,这样的表存储被列为索引的列项值和指向真正完整记录的指针.索引对用户透明.仅仅被数据库引擎用来加速检索真实记录.有索引的表.insert和update操作会耗费很多其它时间而 ...
- mysql 建立加密连接
加密连接可提高数据的安全性,但会降低性能.要进行加密连接,必须满足以下要求: user权限表里要有相关的SSL数据列.如果安装的MySQL服务器是4.0.0版的,user权限表已包含相关的SSL数据列 ...