目的：使用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. zookeeper[5] zookeeper集群配置及伪集群配置

    参考:http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html 集群配置: 1.配置文件conf/zoo.cfg,除了单机模式的配置之外, ...

  2. 判断IE版本的HTML语句详解<!--[if IE]> <![endif]--> - AnswerCard

    一个页面里面只能有一句这样的判断 我们常常会在网页的HTML里面看到形如[if lte IE 9]……[endif]的代码,表示的是限定某些浏览器版本才能执行的语句,那么这些判断语句的规则是什么呢?请 ...

  3. 你需要知道的九大排序算法【Python实现】之选择排序

    一.选择排序 基本思想:选择排序的思想非常直接,不是要排序么?那好,我就从所有序列中先找到最小的,然后放到第一个位置.之后再看剩余元素中最小的,放到第二个位置--以此类推,就可以完成整个的排序工作了. ...

  4. 杭州电 1372 Knight Moves（全站搜索模板称号）

    http://acm.hdu.edu.cn/showproblem.php?pid=1372 Knight Moves Time Limit: 2000/1000 MS (Java/Others)   ...

  5. Ajax原生XHR对象

    前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象.   ...

  6. pwn学习之dl_resolve学习篇

    一:首先来了解一下linux下常见的攻击缓解机制: CANARY:(金丝雀值,指的是矿工曾利用金丝雀来确认是否有气体泄漏,如果金丝雀因为气体泄漏而中毒死亡,可以给矿工预警),类似于windows GS ...

  7. 去除html页面中按钮在ios中的默认样式，去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  8. Android --------- 命名规范

    工程 软件名称,最好是英文首字母大写:如MobileSafe. 包 企业单位网址的倒序+软件名称:如com.baidu.mobilesafe. 类 类中分为:(头字母小写,其他每个单子首字母大写) 1 ...

  9. Android-为何以及如何保存Fragment实例

    在安卓开发中,由于旋转设备会造成配置改变进而导致Activity实例被摧毁(当然也包括Activity托管的Fragment).Activity或Fragment实例被摧毁自然也就让Model被摧毁, ...

  10. string.Format 指定字符串宽度

    语法: { index[,alignment][:formatString]} index,为索引号,不用多说. alignment,是一个带符号的整数,绝对值的大小表示字段的宽度. formatSt ...