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

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

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

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

实际技术原理主要是 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. STL - 常用关联容器代码 - set & multiset

    代码如下: /* 5. set & multiset */ set<string> cities{ "Braunschweig", "Hanover& ...

  2. POJ 3463 Sightseeing

    最短路+次短路(Dijkstra+priority_queue) 题意是要求你找出最短路的条数+与最短路仅仅差1的次短路的条数. 開始仅仅会算最短路的条数,和次短路的长度.真是给次短路条数跪了.ORZ ...

  3. TCP 中出现RST的情况

    http://www.360doc.com/content/13/0702/10/1073512_297069771.shtml 原 几种TCP连接中出现RST的情况 发表于1年前(2013-05-0 ...

  4. Git高速入门——Git安装、创建版本号库以及经常使用命令

    学习Git最全面的资料,在我看来是这本书--Pro Git,网上关于Git的教程有非常多,包含当中一些非常优秀的教程.这一系列的博客,主要是记录自己学习Git的经历.以及在这一过程中遇到的一些问题. ...

  5. e.keycode详解

    function submitLoginForm(e) { e = window.event || e; if(e.keyCode == 13) { login(); } } keycode 8 = ...

  6. Android应用开发揭秘之优化技术

    2013-06-28 第15章 优化技术   不管用什么语言进行开发,所有的优秀代码都会展示出共有的经典品质: 简练,可读性强,模块化,层次性,设计良好,高效,优雅,清晰等.   Java程序员能够依 ...

  7. C#调取java接口

    1. public class APIRequest    {       //public static string commonUrl = @"http://192.168.2.186 ...

  8. Linux命令-帮助命令:whatis，apropos

    whatis可以查看命令简化版的帮助内容 whatis ls 查看简化版的ls命令的帮助内容 whatis ifconfig 查看简化版的ifconfig命令的帮助内容 apropos可以查看配置文件 ...

  9. RMAN检查数据库physical/logical corruption

    1.检测physical corruption RMAN> backup validate database archivelog all; 2.检测logical corruption RMA ...

  10. No persister for nhibernate 解决下面的问题

    在你的实体类对应的配置文件点右键选择属性,修改类型为:一直复制和嵌入的资源.就可以了.