代码用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. Python使用MySQLdb报Library not loaded: libmysqlclient.18.dylib错误

    Library not loaded: libmysqlclient.18.dylib就是找不到这个文件,首先要确定是否有这个文件 可以使用find命令,确认位置后可以使用如下两种方法:1.制作软连接 ...

  2. xargs的原理剖析及用法详解

    转载请注明出处:http://www.cnblogs.com/f-ck-need-u/p/5925923.html 学习这个xargs花了很长时间,在网上翻了很久也查了很多书关于xargs的介绍,都只 ...

  3. 学习Linux入门50个基本命令

    Linux系统以一切皆文件的方式运行系统.虽然存在ubuntu版本的图形界面,但在企业的服务器里面还是以命令行系统运行为主. 以下是初学50个基本的Linux命令行的体会 1:pwd 显示当前你所在的 ...

  4. MD5在java中的使用

    MD5是什么? MD5是message-digest algorithm 5(信息-摘要算法)的缩写,被广泛用于加密和解密技术上,它可以说是文件的"数字指纹".任何一个文件,无论是 ...

  5. 【英语魔法俱乐部——读书笔记】 0 序&前沿

    [英语魔法俱乐部——读书笔记] 0 序&前沿   0.1 以编者自身的经历引入“不求甚解,以看完为目的”阅读方式,即所谓“泛读”.找到适合自己的文章开始“由浅入深”的阅读,在阅读过程中就会见到 ...

  6. 手动部署servlet

    1.编写servlet,在tomcat\webapps目录下新建文件Test,Test目录如下 Test | classes   web.xml | test01 | Servletfirst.jav ...

  7. java规范（二）

    常量命名 不允许使用任何魔法值(未定义的常量)直接出现在代码中 反例: String key="Id#taobao_"+tradeId: cache.put(key, value) ...

  8. textview 弹出键盘上面添加完成按钮，并设置输入内容的格式。

    - (void)setContentView{ self.contentTextView = [[UITextView alloc]initWithFrame:CGRectMake(11, 70, S ...

  9. ARM开发板上iconv调用失败的解决方法

    当前流行的字符编码格式有:US-ASCII.ISO-8859-1.UTF-8.UTF-16BE.UTF-16LE.UTF-16.GBK.GB2312等,其中GBK.GB2312是专门处理中文编码的.而 ...

  10. [原创.数据可视化系列之一]使用openlayers 3 显示聚合数据

    在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的 ...