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,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...
随机推荐
- JavaScript 类私有方法的实现
一:将私有方法移出模块,因为模块内部的所有方法都是对外可见的. class Widget { foo (baz) { bar.call(this, baz); } // ... } function ...
- 设置UIScrollView只可以水平或者竖直滚动
UIScrollView里边包含多个UIWebView: 可以通过设置contentSize的值,设置其width为UIScrollerView可视区域的宽度:即UIScrollView的width, ...
- Android学习【Android内核编译流程和错误笔记】
博客:http://blog.csdn.net/muyang_ren Ubuntu14.04 LTS(要求是64位长期支持版LTS) Jdk1.8 内核:android4.0 一:jdk 1.解压jd ...
- LINQ更新用户
public Boolean UpdateUser(int id, string userName, string account, string password, string EkeyID, ...
- 添加序号列（SQL Server）
SELECT ROW_NUMBER() OVER (ORDER BY 实际缴费金额 ) AS A, --序号 RANK() OVER (ORDER BY 实际缴费金额 ) AS B, --相同跳过从新 ...
- C# 前台线程与后台线程区别
using System; using System.Drawing; using System.Windows.Forms; using System.Threading; namespace Wi ...
- uva 10212 - The Last Non-zero Digit.
#include <cstdio> #define ll long long const ll MOD = 1e9; int main() { ll N, M; while(scanf(& ...
- 同步关键字synchronized
同步关键字synchronized 同步关键字synchronized使用简洁,代码可维护性好.在JDK6中,性能也比早期的JDK有很大的改进.如果可以满足程序要求,应该首先考虑这种同步方式. 关键字 ...
- 使用 c# 调用进程相关开发
最近在维护公司的以前项目中发现,使用到了进程相关知识.现在将此总结,以备后面查看复习. 一.进程查看器 程序在运行的时候,操作系统就会为其分配一个进程.那么进程到底是什么东西呢? 实际上,进程 ...
- C语言初学 测定各数据类型的长度
#include<stdio.h> #include<stdlib.h> int main() { int a,b; int i=0; printf("char:%d ...