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

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

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

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

实际技术原理主要是 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. C#基础视频教程6.3 如何简单读写数据库

    在继续往下做之前,我们需要把之前的代码尽可能的精简(会对后面很有好处,而且读者也应该仔细比对这一部分的代码和上一部分哪里真正得到了优化,从而提高编程水平). 首先数据库的操作类有哪些是可以做的更加普遍 ...

  2. nginx 设置错误的自己定义404页面跳转到500

    5年前写的站, 当时是在apache下写的error page, 换了nginx后, 404页面直接跳到了500 server内部错误. 仅仅须要在配置 try_files 的时候指定一下就能够了 我 ...

  3. 正确用DD测试磁盘读写速度

    转自:http://blogread.cn/it/article/6479?f=wb 问: 以下几种方式测试磁盘读写速度有什么区别? dd bs=1M count=128 if=/dev/zero o ...

  4. vue 表单 验证 async-validator

    1.使用插件async-validator async-validator 地址:https://github.com/yiminghe/async-validator 2.示例(vue+elemen ...

  5. js与jQuery方法对比

      javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...

  6. Session 简单购物车

    package session.test; import java.io.IOException; import java.io.PrintWriter; import java.util.Linke ...

  7. Ubuntu14.04安装redis-server

    1.update再install操作: sudo apt-get update sudo apt-get install -y redis-server 如果你已经安装了redis,会提示:redis ...

  8. C函数返回字符串

    #include "stdio.h" #define KEY 5; int main() { char password[50] = "123456"; enc ...

  9. atitit。mssql sql server 转换mysql 及 分页sql ast的搭建

    atitit.mssql sql server 转换mysql  及 分页sql ast的搭建 1. 主要的的转换::函数的转换,分页的转换 1 2. 思路::mssql sql >>as ...

  10. Machine Learning—The k-means clustering algorithm

    印象笔记同步分享:Machine Learning-The k-means clustering algorithm