代码用HTML+JS实现：

 代码（用HTML+JS实现）：

 <!doctype html>

 <html lang="UTF-8">

     <head>

         <meta charset="UTF-8">

         <title>div 弹出层触发click事件弹出</title>

         <style type="text/css">

             <!-- html,

             body {

                 height: 100%;

                 margin: 0px;

                 font-size: 12px;

             }

             .mydiv {

                 line-height: 20px;

                 border: 1px solid #0080FF;

                 font-size: 12px;

                 z-index: 999;

                 width: 500px;

                 height: 220px;

                 left: 72%;

                 top: 20%;

                 margin-left: -150px!important;

                 /*FF IE7 该值为本身宽的一半 */

                 margin-top: -60px!important;

                 /*FF IE7 该值为本身高的一半*/

                 margin-top: 0px;

                 position: fixed!important;

                 /* FF IE7*/

                 position: absolute;

                 /*IE6*/

             }

         </style>

     </head>

     <body>

         <div id="popDiv" class="mydiv" style="display:none;">

             <div align="right" style="padding:2px;z-index:2000;font-size:12px;cursor:pointer;position:absolute;right:0;" onclick="closeDivFun()">

                 <span style="border:1px solid #000;width:12px;height:12px;line-height:12px;text-align:center;display:block;background-color:#FFFFFF;left:-20px;">×</span>

             </div>

             div弹出窗口信息！<br/>可以在此添加自定义内容<br/>

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

         </div>

         <a href="javascript:showDivFun()">点击这里弹出层</a>

         <script>

             //弹出调用的方法

             function showDivFun() {

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

             }

             //关闭事件

             function closeDivFun() {

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

             }

         </script>

     </body>

 </html>

显示效果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATcAAAEwCAIAAABdRaHdAAAIYklEQVR4nO3bTZbaRgCFUa3FE3tHvZ3MWApLYSnMPMss5yiDdhOQVD8SOH5C954aqEUhRIevS2AyfP/xbfznb8MwMsf3H98GlRpG8lCpYaQPlRpG+lCpYaQPlRpG+lCpYaQPlRpG+lCpYaSPr0qBVCqFdMuVDsPP5j1Lcyb7F6cNw8/SaB6z83F7HqvnacIfV6y0+WquvMSboZaqu23PH/dzu3Lknu3+pwA51q2lqxalyrTOom5lPnMcayl79/or3p75ndlM1s/KRuc27NF/lT7zXvF+54a1br59f5z6Wto85+ZBINxDpYszepJYDON+e+37yfrO0h+I+vnDTq2otHP//Kb5zGbqzcvjl5wn7MK6Sjvf+zXX0tLk+52lt6lrf+xc/yHWuvelayutzO/Jpv6Wsr/S0hzYhXXfPVpV6eKFbv2Y9Zs2r6U98yHW9Iq3/uLuX2/7G3im0p6r2cqCLFR24VelzVf8G48//Z8AGnzbHtKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNKpFNK9eaXDX4ax+/H+lcLeqRTSqRTSqRTSqbR692FY3C7N6TnObzqNlzwQmQ5V6fX88XG+juN4OQ2fG7P5X+73jLNXfymb2/bQ0pxWerj5j6uOI+M9OlCll9MwFOKc3uurzEpdk8mT7frMxVvnJ9A8mVXHGVW6Wweq9G4tbd3rcf3sbG8sL3qlnPorbZ6wtfSNHaPSy+nrRXt/xXs9fwzDMAynyzh+bp/uX9z1taunitvk4um1Kq0/aP9x5kdjRw5Q6fX8MZwu4+fGx/l6f+l7OX3eNI7j5Xy+brlArRTSLLmnrp6uOv9qqHSn3r/Su8vc2+Z/+26fI13O5+ssj2eWylLbmyt9fi1lp45e6a+V9no+X8Zx6TPesfVmsvTjsHTZPD5Rae1p9q2l7NT7VzpeTsOvy9pfbz4vjx8jXU7Tj34XA1vMrPLjpJPFpfVVa2nlfCY36XaPDlDp/YdHX40Ow12Z1/Pp8ZPfF66l46yNyXZzDVzMe36c0kNP7qLSPTpEpavv1eqw7v5e/89aOnmsyk72SKWP85dWm1Uv9EpU87rWHrC5f/5AKn0DKoV0KoV0KoV0KoV0KoV0KoV0KoV0KoV0Kq3efev/a9LzBaOx9dXcbd+m2Dyh/xFfeCh6vH+lte/y3YVR+irP8mGfqLT/u039L/TfVNeqE+v8PbPB+1dau7X8JfjFnf2vwvrROtfM+bT5X5bmn56ec27+Hjofq/M3yVoqrW0vvrbqL7ih/D+RVqqbvOhLO3tOr2fChqfZU/Kqk6TfISpdu4b075xPKFW6oajJTRsq7Vd59PmPnb83fb7KUSp92PlEpZXX7v2e+cK4eJf60XoqrSzI9QmTs2r+Nponc/+IpR/ZRqVdO28/9lfaP6fZ8KvW0mYwlTWw9OiTvwilw2r1GSp92Nlc6ErLVP9xFk6y72J4c6XN+f0nU3+mY2H1bj4odUepdPF1U782qy8ppTmdlS4+dL2uxUpLSsepx7N4GpVnUTnn5h3pd5RKl2/tXjnr0+p3rKyB95NLKVZuWltOPZj6XxaV/kGHqLR4a2HRaNZbOcKtqPkKWY+tp9LJMtj/16eySNafSGVCaVp9YWeDg1ZaujJsXuzNg5kEuXiQyuu1NH9+6+JGyeKZV8658luaH6rypCrPhc0OWinsiEohnUohnUohnUohnUohnUohnUoh3VEqHYaf05se98wnNI68cj5sdpRKx8euFhu77RyGn5OxuHM+pz7t9z1N3tuBKt1+kK9K73+cbC/eOj8IbHCISnvWt8oF8KosVcrLHaLShz19FdUvjyvJqZSXU+nD/tI70tuctWtycz80vX+l/Z/6PNxx61WuSnm59690uqejotLyuLjezu/bPD6scqxK51FNblqcM7/iXbzLfHvx+LDWgSrt+UCo/59bKh8C+/dSXusolTY/p111xbu4v/RA9f3Q9P6VNj89+p/Hn/6VsD/vXynsnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUohnUoh3ftXahh7H29eKbwBlUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUI6lUK67z++/QseOq/Qz7J6fAAAAABJRU5ErkJggg==" alt="" />

DIV弹出和关闭新DIV的更多相关文章

  1. bootstrap div 弹出与关闭

    html <div id="myModal" class="modal" tabindex="-1" role="dialo ...

  2. div弹出层的效果带关闭按钮

    下面我做的这个是个进度条的弹出层 <style type="text/css"> #tuxiang { width: 57px; } /*div弹出框的css*/ .t ...

  3. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  4. JS网页顶部弹出可关闭广告图层

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

  5. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  6. easyui弹出窗关闭前调用确认窗口,先关闭页面后调用弹出窗口

    弹出窗关闭的时候提示是否关闭,同时进行一些对应的方法调用, 然而在进行页面关闭调用的时候,往往页面关闭了,才弹出确认对话框, $.messager.confirm和panel的onBeforeClos ...

  7. 20151124001 关闭C#主窗体弹出是否关闭对话框

    关闭C#主窗体弹出是否关闭对话框 private void Frm_Main_FormClosing(object sender, FormClosingEventArgs e)        {   ...

  8. Android中检测软键盘的弹出和关闭

    Android系统并没有提供明显的API来监听软键盘的弹出和关闭,但是在某些情况下我们还是有办法来检测软键盘的弹出和关闭. 从StackOverflow找到了一个不错的方法.但是这种只适用于在mani ...

  9. form中的button按钮在IE11中自动提交表单问题导致弹出框关闭之后表单被重置

    最近几天,测试系统,遇到一个兼容性问题,form中有一个button按钮,没有指定type类型,点击按钮弹出框选择值之后回填给form上的一个单行文本框,在IE6.IE7.IE8.IE9.IE10中测 ...

随机推荐

  1. php中的可变函数和匿名函数

    可变函数 一个函数的名,是一个变量的时候,就称为可变函数 <?php header("content-type:text/html;charset=utf8"); funct ...

  2. CheckBox设置Enabled为False后，无法修改ForeColor

    设置CheckBox的AutoCheck为False,Enabled为True,即可解决.

  3. kettle定时任务_第三方合作方有订单自动发送邮件通知_20161214

    由于和第三方合作,需要知道第三方合作方有了订单后通知对方,如果每天查看数据太麻烦了,因此想到了用Kettle定时任务,先判断系统里有没有订单,如果有就执行查询调取订单数据并发送邮件作业,如果没有则不执 ...

  4. UNIX域套接字（unix domain）

    UNIX域套接字用于在同一台机器上运行的进程之间的通信. UNIX域套接字提供流和数据报两种接口. 说明:UNIX域套接字比因特网套接字效率更高.它仅赋值数据:不进行协议处理,如添加或删除网络报头.计 ...

  5. 对于.h文件和.c文件

    C语言中.h文件和.c文件详细解析_云止水_新浪博客http://blog.sina.com.cn/s/blog_73006d600102wcx5.html

  6. 获取应用图标，Drawable 转bitmap

    获取应用图标: PackageManager p = context.getPackageManager(); Drawable draw=null; ApplicationInfo info; tr ...

  7. nginx的初步了解

    今天学习了nginx.nginx不但可以作为服务器,类似于IIS,也可以作为反向代理.它有一个配置文件nginx.conf,在这个文件里配置了一些重要的参数,通过修改这些参数,然后启动nginx,就可 ...

  8. Linux Svn 安装过程及配置

    重要的是第一步的安装,第二步配置可能没用,但是没试过,因为服务器上已经安装了第一步. 此处的第二步只为做个记录,说明一下里边的配置文件的用途. 3. 自己实际操作中的的配置记录(参照服务器别人的配置记 ...

  9. 04 Apache Solr: 目录结构

         通过前面的介绍,我们已经能够看到管理员界面并对Solr形成了一个感性的认识.本篇将在物理上深入了解Solr的安装目录结构和Solr示例的主目录结构.   安装目录结构 Solr 6.3.0安 ...

  10. js 遇到问题

    1)obj.style.attr 和obj.style[attr]区别: 2)window.onload一个页面只能出现一次: 3)border-radious实现 实心和空心圆 要点:宽度高度一样大 ...