首先上一张图 看下弹出层的效果

从图中可以看到二部分 一是弹出层 二是遮照层

弹出层:即弹出你要操作的内容

遮照层:遮照住不要操作的内空

实际技术原理主要是 CSS +JS  (z-index是核心)

CSS部分主要是 z-index (CSS定义为 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 说白了就是 凹 凸 )

JS则是 weight 和 wdith 的计算，你弹出来层的大小 位置!

下面是代码:

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

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>无标题文档</title>

 <style type="text/css">

 #LoginWind{

     position: absolute;

     visibility: hidden;

     overflow: hidden;

     border:1px solid #CCC;

     background-color:#F9F9F9;

     border:1px solid #333;

     Dpadding:5px;

     z-index:999;

 }/*弹出层样式*/

 #popup{position:absolute;

  width:100%;

  height:100%;

   z-index:888;

   background:#666;

   filter:alpha(opacity=60);

   opacity: 0.6;

   display:none;}/*遮罩层样式*/

 </style>

 </head>

 <body>

 <div id="popup"></div>

 <div style="width:200px" id="LoginWind">

 用户名:<input type="text" id="txtName" /><br />

 密码:<input type="text" id="txtPwd" /><br />

 <input type="button" id="btnLogin" value="登录" />

 </div>

 <input type="button" id="btnOPenDiv" value="打开登录窗口" onclick="showPopup(300,200);" />

 <script type="text/javascript">

  function showPopup(h,w)

  {

          var popUp=document.getElementById('LoginWind')

         popUp.style.top = "200px";

         popUp.style.left = "200px";

         popUp.style.width = w + "px";

         popUp.style.height = h + "px";

         popUp.style.visibility = "visible";

         document.getElementById("popup").style.display="block";

  }

 </script>

 </body>

 </html>

//下面是效果

//代码功能，及CSS效果还可很多可以加强的地方，我这里主要是学习知道它是怎么实现的!

javascript弹出层-DEMO001的更多相关文章

  1. JavaScript弹出层

    1.这个弹出层就是一个DIV 2.看需要什么效果 2.1.如果是仅仅需要弹出层,而背后的网页同样可以点击,那么只需要一个DIV即可,效果如图: 2.2.需要一层透明背景,而后面的网页只能看不能点,效果 ...

  2. html+javascript实现可拖动可提交的弹出层对话框效果

    本文为大家介绍下使用html+javascript实现可拖动弹出层.对话框.可提交,具体代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助 <!DOCTYPE HTML PUBLIC &quo ...

  3. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  4. JavaScript学习总结(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  5. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  6. 使用JavaScript实现弹出层效果

    声明 阅读本文需要有一定的HTML.CSS和JavaScript基础 设计 实现弹出层效果的思路非常简单:将待显示的内容先隐藏,在触发某种条件后(如点击按钮),将原本隐藏的内容显示出来. 实现 < ...

  7. javascript网页弹出层练习

    网页中经常出现很多"popup"弹窗效果,这里做一个练习,给我们初学者一个参考. HTML代码: <div id="popup"></div& ...

  8. JavaScript学习总结(二)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

  9. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. Android相机基础基于camera2API

    前言 最近,在使用Android做一个照相机的开发.因为不能使用系统提供的相机应用,所以只能自己写一个.Android以前提供相机的api叫camera,不过在level 21被Google抛弃了.网 ...

  2. Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器）

    Cocos2d-x 3.2 Lua演示样例 AssetsManagerTest(资源管理器) 本篇博客介绍Cocos2d-x 为我们提供的一个类--AssetsManager在Lua中的使用样例,效果 ...

  3. 【UNIX网络编程】FIFO

    管道作为进程间通信的最古老方式,它的缺点是没有名字,因此仅仅能用在有亲缘关系的父子进程之间.对于无亲缘关系的进程间.无法用管道进行通信.FIFO能够完毕无亲缘关系的进程间的通信.FIFO也被称为命名管 ...

  4. 使用Nginx负载均衡搭建高性能.NETweb应用程序（转）

    一.遇到的问题 当我们用IIS服务器部署了一个web应用以后,当很多用户高并发访问的时候,客户端响应就会很慢,客户的体验就会很差,由于IIS接受到客户端请求的时候,就会创建一个线程,当线程达到几千个时 ...

  5. 注意Hibernate4在开发当中的一些改变

    Hibernate4的改动较大只有spring3.1以上版本能够支持,Spring3.1取消了HibernateTemplate,因为Hibernate4的事务管理已经很好了,不用Spring再扩展了 ...

  6. 在 Ubuntu12.04/Xubuntu12.04 上安装 QQ2012，这才是真正可行的

     2012-5-18 11:16:29   1. 安装wine 终端下输入: sudo apt-get install wine 复制代码 有人这样:sudo apt-get install wine ...

  7. 【LeetCode】96. Unique Binary Search Trees (2 solutions)

    Unique Binary Search Trees Given n, how many structurally unique BST's (binary search trees) that st ...

  8. 火狐浏览器（firefox）中js要注意的问题

    1.出现错误调用error方法或者ajax请求了多次,那么极有可能是异步请求的原因. 添加   async  : false  , -> async. 默认是 true,即为异步方式,$.aja ...

  9. Python3 casefold() 方法

    描述 Python casefold() 方法是Python3.3版本之后引入的,其效果和 lower() 方法非常相似,都可以转换字符串中所有大写字符为小写. 两者的区别是:lower() 方法只对 ...

  10. c# ComboBox绑定枚举

    定义枚举 public enum UserLevel { Commmon = , Administrator, Developer } 方法一 private void Method1() { com ...