JS中，可以弹出一个层来进行提示等作用，方法是利用css样式display样式，当display等于none时，该元素就不会在页面显示出来，而且元素也不会占空间。
就是用户触发某些事件时，动态修改该样式的值，把none改成可以显示值，就可以在页面显示出该样式。
控制div的是否展示，来弹出提示或其他用途的层，动态修改display样式的值。

如下，是一个最简单的弹出层，是一个div，里面是个两行一列的表格，一行是提示，一行是关闭该div的链接。

如果是LODOP内嵌，可以发现会挡住这种类型的弹出层，解决方法查看本博客另一篇博文：LODOP内嵌挡住浏览器的div弹出层
代码：

<style>

 .buledivv{

 display:none;/*默认该div是不展示的*/

 position:absolute;/*设置为绝对定位*/

 top:20%;/*该div上边距是20%*/

 left:20%;/*该div左边距是20%*/

 width:400px;/*该div宽是400px*/

 height:200px;/*该div高是200px*/

 background-color:#7da0e1;/*该div背景色是#7da0e1*/

 z-index:10000;/*该div层级是10000*/

 }

  </style>

</head>

<body>

<p><a href="javascript:;" onclick="document.getElementById('wo').style.display='block'">点击这里弹出层</a><!--点击该链接在当前页把不展示属性改成 为块状展示出来--></p> 

<div id="wo" class="buledivv"> <table><!--id为wo的div，给予该样式-->

<tr><td width=400px height=100px align=center><span style="font-size:20px;">请先输入内容，不能为空！</span></td></tr>

<tr><td width=400px height=100px align=center><a href="javascript:void(0)" onclick="document.getElementById('wo').style.display='none'">

    确定，关闭该提示</a><!--点击该链接让该div重新不展示--></td></tr></table>

</div>

图示：

【JS新手教程】浏览器弹出div层1的更多相关文章

  1. 【JS新手教程】弹出两层div，及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

  2. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  3. js点击弹出div层

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

  4. js弹出div层内容(按回退键关闭div层及遮罩)

    <!--弹出的div列表对应的详情--> <div id="newhtml" class="white_content"> <di ...

  5. jQuery 弹出div层

    目的:使用jQuery弹出一个div窗口:这种效果经常应用于页面内容的展示,登录效果的实现.其实,实现这种效果有好多种方式: 效果如下: 代码如下: <html> <head> ...

  6. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  7. Js 根据不同浏览器弹出窗口

    /// <reference path="intellisense/jquery-1.2.6-vsdoc.js" /> var userAgent = navigato ...

  8. 根据图中的盲点坐标，弹出div层

    <div class="map_r" id="mapinfo" style="position: absolute; top: 20px; le ...

  9. 基于jquery ui修改的不依赖第三方的背景透明的弹出div

    效果图: 代码: <!doctype html> <html> <head> <meta charset="utf-8"> < ...

随机推荐

  1. 清官谈mysql中utf8和utf8mb4区别

    清官谈mysql中utf8和utf8mb4区别 发布时间:2015 年 10 月 4 日 发布者: OurMySQL 来源:JavaRanger - 专注JAVA高性能程序开发.JVM.Mysql优化 ...

  2. HTTP Cookie 详解

    参考: http://blog.csdn.net/lijing198997/article/details/22174151

  3. 产品设计师 VS UX设计师：你更想成为哪一个？

    随着互联网的快速发展,越来越多的应届毕业生也成为设计师的一员.他们当中的许多人选择UX设计师作为第一份工作,也有一些人选择做一个产品设计师.你是否也想成为设计师呢?这两种设计师你更倾向于哪一个呢?在你 ...

  4. SQL group by 分组后，同一组的排序后取第一条

    SELECT * FROM(                SELECT                     [SPID]                    ,[PH1]           ...

  5. .NET平台机器学习资源汇总，有你想要的么？（转）

    出处:http://www.cnblogs.com/asxinyu/p/4422050.html 阅读目录 1.开源综合类 2.开源.NET平台非综合类 3.其他资源与技术博客 4.我的100篇博客之 ...

  6. asp.net mvc 5框架揭秘（文摘）

    第1章 asp.net + mvc 1.1.2 什么是MVC模式: model:对应用状态和业务功能的封装,同时包含数据和行为的领域模型. view:实现可视化界面的呈现并捕捉最终用户的交互操作. c ...

  7. 【转载】Reactor模式，或者叫反应器模式

    Reactor这个词译成汉语还真没有什么合适的,很多地方叫反应器模式,但更多好像就直接叫reactor模式了,其实我觉着叫应答者模式更好理解一些.通过了解,这个模式更像一个侍卫,一直在等待你的召唤,或 ...

  8. 测试用Word2007发布博客文章

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  9. NAOQI API之学习笔记

    https://www.jianshu.com/p/e84f38e45bf5 NAOQI OS是软银pepper和nao机器人的核心操作系统,NAOQI API提供了访问机器人的各种传感器设备接口以及 ...

  10. 谈谈INotifyPropertyChanged和ICommand

    WPF,Windows8和Windows Phone开发中的MVVM设计模式中很重要的两个接口是INotifyPropertyChanged和ICommand,深入理解这两个接口的原理,并掌握其正确的 ...