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

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

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

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

实际技术原理主要是 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. RaceWeb介绍(7)：由500强公司数据高速生成百度地图——生成坐标字段及坐标数据

    接上篇. 一.生成X坐标.Y坐标两个字段. 我们须要为每一个公司建立X坐标和Y坐标字段,用来保存XY坐标. 既然为了突出"快",这一步就有程序来完毕吧. 右键单击"世界5 ...

  2. SELECT语句逻辑运行顺序，你知道吗？

    引言 这不是一个什么多深的技术问题.多么牛叉的编程能力.这跟一个人的开发能力也没有很必定的直接关系,可是知道这些会对你的SQL编写,排忧及优化上会有很大的帮助.它不是一个复杂的知识点.可是一个很基础的 ...

  3. ZOJ 3630 Information 强连通

    题意:n m表示n个节点,m条边,下面m行a b 表示a-b点有一条有向边 题目:给定有向图,删去一个点后,可以求出该图中强连通分量中最大的点数 问:删去某点后,最大点数 最小是多少 思路:枚举删点, ...

  4. JavaScript indexof方法

    1.indexof方法 indexof方法可以在字符串和数组上使用. 2.字符串使用 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. <!DOCTYPE html&g ...

  5. unix 网络编程 第七章

    1     getsockopt和setsockopt函数 套接字选项粗分为两大基本类型:一是启用或禁止某个特性的二元选项,二是取得并返回特定值的选项,参数都是以指针形式传入的. 2     套接字状 ...

  6. chrome 禁止自动更新

      禁止chrome自动更新 CreateTime--2017年7月4日09:07:01Author:Marydon 版本号:59.0.3071.115 x64 第一步:禁止Google更新服务 参考 ...

  7. 如何配置 Oracle VirtualBox 中的客户机与物理机网络

    当你在 Oracle VirtualBox 虚拟机软件 中安装了各种操作系统时,你可能需要实现物理机与虚拟机之间的相互访问. 在这篇文章中,我们将会以最简单明了的方式来说明如何配置客户机与 Linux ...

  8. 如何连接oracle,mysql, SQL Server数据库（Java版）

    先添加上连接oracle,MySQL的驱动路径和数据库连接URL: MySQL: final String DBDRIVER = "org.gjt.mm.mysql.Driver" ...

  9. 转载：【Linux+windows】PHP5.5安装PHPRedis扩展

    首先,你必须安装了 Redis服务器,然后才能安装php-redis扩展,就像先安装mysql,然后再将php-mysql扩展安装并引入(区别是:php-redis扩展插件php没有自带,php-my ...

  10. 使用maven创建一个例子

    创建一个目录:D:\testmaven 在命令行中切换到D:\testmaven目录后输入: mvn archetype:generate 下载骨架,它会往本地工厂存信息 也可以直接使用带有参数的命令 ...