1.这个弹出层就是一个DIV

2.看需要什么效果

2.1.如果是仅仅需要弹出层，而背后的网页同样可以点击，那么只需要一个DIV即可，效果如图：

2.2.需要一层透明背景，而后面的网页只能看不能点，效果如图：

像这种，就需要至少两个DIV，一个负责显示中间的小部分，另一个DIV就负责显示后台灰色半透明的层。

这里有一个第二种情况的例子：

 <!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=gbk" />

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

 <style type="text/css">

 /*弹出层的STYLE*/

 html,body {height:100%; margin:0px; font-size:12px;}

 .mydiv {

 /*就是这个position:fixed起作用，生成相对定位的元素，相对于其正常位置进行定位。*/

      position:fixed;

      /*这里都是对外边距进行设置*/

      margin:auto;

      left:0;

      right:0;

      top:0;

      bottom:0;

      z-index:99;

      line-height: 40px;

      padding-left:20px;

       /*设置div的宽和高*/

      width:500px;

      height:180px;

 background-color: #ffa;

 border: 1px solid #f90;

 }

 .bg {

 line-height: 40px;

 background-color: #ccc;

 width: 100%;

 height: 100%;

 left:0;

 top:0;/*FF IE7*/

 filter:alpha(opacity=50);/*IE*/

 opacity:0.5;/*FF*/

 z-index:1;

 position:fixed!important;/*FF IE7*/

 position:absolute;/*IE6*/

 _top:       expression(eval(document.compatMode &&

             document.compatMode=='CSS1Compat') ?

             documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/

             document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

 }

 /*The END*/

 </style>

 <script type="text/javascript">

 function showDiv(){

 document.getElementById('popDiv').style.display='block';

 document.getElementById('bg').style.display='block';

 }

 function closeDiv(){

 document.getElementById('popDiv').style.display='none';

 document.getElementById('bg').style.display='none';

 }

 </script>

 </head>

 <body>

 <!--这里其实要用到两个弹出层，一个是我们要显示的内容，一个是后面透明的背景-->

 <div id="popDiv" class="mydiv" style="display:none;">恭喜你！<br/>你的成绩为:60分<br/>

 <a href="javascript:closeDiv()">关闭窗口</a></div>

 <!--就是这个透明的背景-->

 <div id="bg" class="bg" style="display:none;"></div>

 <div style="padding-top: 20px;">

 <input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />

 </div>

 </body>

 </html>

JavaScript弹出层的更多相关文章

  1. javascript弹出层-DEMO001

    首先上一张图 看下弹出层的效果 从图中可以看到二部分 一是弹出层 二是遮照层 弹出层:即弹出你要操作的内容 遮照层:遮照住不要操作的内空 实际技术原理主要是 CSS +JS  (z-index是核心) ...

  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. MFC中按钮控件的用法笔记（转）

    VC学习笔记1:按钮的使能与禁止 用ClassWizard的Member Variables为按钮定义变量,如:m_Button1:则m_Button1.EnableWindow(true); 使按钮 ...

  2. [Erlang01] 使用catch与try catch避免嵌套nest_case

    catch 如此好用,为什么官方还是推荐用try catch? 1. catch 的用法非常简单: catch case do_check(Test) of {ok,Result} -> do_ ...

  3. Spring学习（三）——集成 Velocity

    上篇文章http://www.cnblogs.com/wenjingu/p/3822989.html我们使用Gradle构建了一个简单的Spring MVC Web应用程序, 本篇将在上篇的基础上将j ...

  4. 解决Android手机 屏幕横竖屏切换

    Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载),怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在An ...

  5. “全栈2019”Java第四十七章：继承与方法

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. [BZOJ1935][SHOI2007]Tree 园丁的烦恼（树状数组）

    题目描述 很久很久以前,在遥远的大陆上有一个美丽的国家.统治着这个美丽国家的国王是一个园艺爱好者,在他的皇家花园里种植着各种奇花异草. 有一天国王漫步在花园里,若有所思,他问一个园丁道: “最近我在思 ...

  7. ACM-ICPC 2018徐州网络赛-H题 Ryuji doesn't want to study

    死于update的一个long long写成int了 真的不想写过程了 ******** 树状数组,一个平的一个斜着的,怎么斜都行 题库链接:https://nanti.jisuanke.com/t/ ...

  8. 一，Smarty模板技术/引擎——简介

    Smarty是一个使用PHP写出来的模板PHP模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使PHP程序员与美工分离,使用的程序员改变程序的逻辑内容不会影响到美工的页面设计,美工重新修改 ...

  9. 代理服务器和NAT技术

    一.代理服务器 所谓“代理”,就是代而劳之的意思.代理服务器就是代理网络用户去取得网络信息,形象的说:它是网络信息的中转站,使得一个网络终端和另一个网络终端不直接进行相连,代理网络用户去取得信息.主要 ...

  10. 【FAQ】maven包引入版本引发的问题

    pom.xml文件中的 dependency顺序可能会引起jar包版本不一致的问题,越上面越先引入进来