目的：使用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层的更多相关文章

  1. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  2. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  4. 【JS新手教程】浏览器弹出div层1

    JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...

  5. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  6. jQuery弹出遮罩层效果完整示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 根据图中的盲点坐标，弹出div层

    <div class="map_r" id="mapinfo" style="position: absolute; top: 20px; le ...

  8. 基于jquery ui修改的不依赖第三方的背景透明的弹出div

    效果图: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

  9. 【JS新手教程】弹出两层div，及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

随机推荐

  1. openstack 手动安装版 功能测试

    nova network-create demo-net --bridge br100 --multi-host T --gateway 192.168.3.252 --dns1 202.102.19 ...

  2. 迭代导出word 文档

    Map迭代的使用: Map map = new HashMap() ; Iterator it = map.entrySet().iterator() ; while (it.hasNext()) { ...

  3. Java组合与继承生成的类中构造函数的执行顺序

    [程序实例] import java.util.*; class Meal{ Meal() { System.out.println("Meal Constructor"); } ...

  4. MyBatis的事务处理

    先来假设这样一个问题:如果数据库里面有一个用户表和一个作家表,那么当要添加一条数据到作家表中时,作家表的id必须是用户表中的其中一个id,因为作家一定也要是一个用户.这时就涉及到事务处理. 在上一篇博 ...

  5. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  6. hibernate jpa 注解 @Temporal(TemporalType.DATE) 格式化时间日期，页面直接得到格式化类型的值

    1.日期: @Temporal(TemporalType.DATE) @Column(name = "applyDate", nullable = false, length = ...

  7. Jsp中response对象的所有属性

    所属接口:javax.servlet.http.HttpServletResponse,其父接口是ServletResponse,而且ServletResponse也现在只有唯一一个HttpServl ...

  8. 左右TextView旋转门问题

    最近由于旋转门问题的一个客户找我,当在字符25更多的时候是不是走了,后来,我在重现的问题,发现问题如下面: 问题1.人物25几个月之内可以去. 问题2.在人物25个月,虽然比屏幕宽度,不去 问题3.屏 ...

  9. RecyclerView 详解

    概述 RecyclerView出现已经有一段时间了,相信大家肯定不陌生了,大家可以通过导入support-v7对其进行使用.  据官方的介绍,该控件用于在有限的窗口中展示大量数据集,其实这样功能的控件 ...

  10. 【反射】Reflect 介绍 示例

    介绍 JAVA反射机制是指:在运行状态中,对于任意一个[类],都能够知道这个类的所有属性和方法:对于任意一个[对象],都能够调用它的所有属性和方法:这种[动态]获取类中的信息以及动态调用对象的成员的功 ...