代码用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. IE8下标签float导致的bug。

    前几天帮朋友写一个页面,今天在IE8下面发现一个很奇葩的问题,给a标签添加了float:left之后a标签内的图片不显示了,去掉float:left之后就能正常显示. 代码: <!DOCTYPE ...

  2. 通过sqoop来传输mysql/oracle/vertica数据至HBASE

    首先要注意将连接用的jar包,放到sqoop目录下,我的是/var/lib/sqoop 如果没有主键,则要加上-m 1 export正确的jdk目录 当做key的列必须唯一存在,不然报错 --mysq ...

  3. Socket为什么要翻译成套接字

    作者:陈振玥链接:https://www.zhihu.com/question/21383903/answer/64103663来源:知乎著作权归作者所有,转载请联系作者获得授权. 作为一条刻(wu) ...

  4. linux 驱动学习笔记05--文件系统与设备文件系统

    查看/proc/devices 文件可以获知系统中注册的设备,第 1 列为主设备号,第 2 列为设备名,如:

  5. Bloom Filter学习

    参考文献: Bloom Filters - the math    http://pages.cs.wisc.edu/~cao/papers/summary-cache/node8.html    B ...

  6. 关于Microsoft CRM 2013自动保存Autosave功能的10点说明

    今天不经意翻看到以前记的笔记发现这个笔记觉得还是应该把它整理记录一下: 关于Microsoft CRM 2013自动保存Autosave功能的10点说明: 1.新建时不会自动保存,需要手动点击保存按钮 ...

  7. [转载]卡尔曼滤波器及其基于opencv的实现

    卡尔曼滤波器及其基于opencv的实现 源地址:http://hi.baidu.com/superkiki1989/item/029f65013a128cd91ff0461b 这个是维基百科中的链接, ...

  8. select 标签的两种方式（以动态插入为例）

    标准形式: html <select id="sorte_piceid_copy" name="tea" style="display:none ...

  9. exception 'yii\base\ErrorException' with message 'Class 'MongoClient' not found'

    问题描述: 本来项目运行的好好的,搬了一次办公室(电脑主机一起搬的),第二天的时候就登录不了了. php版本和扩展没有改变,且没有修改任何配置,我尝试重启php5-fpm 服务,又重启nginx服务, ...

  10. C++对象模型

    1.类布局 1.1简单类对象的内存布局 class A { public: void f(); private: int i; char c; static int s; }; 简单对象的内存布局:非 ...