代码用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. Java程序员必须知道的10个调试技巧

    调试可以帮助识别和解决应用程序缺陷,在本文中,将使用大家常用的的开发工具Eclipse来调试Java应用程序. 但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运 ...

  2. hbase hmaster故障分析及解决方案：Timedout 300000ms waiting for namespace table to be assigned

    最近生产环境hbase集群出现停掉集群之后hmaster无法启动现象,master日志报异常:Timedout 300000ms waiting for namespace table to be a ...

  3. WinForm窗体嵌入

    一.在winform窗体上添加两个控件 1.容器>Panel 2.添加 SideBar.dll (下载链接:http://pan.baidu.com/s/1o6qhf9w) (1)将SideBa ...

  4. logistic公式形式的由来，从广义线性回归说起

    普通线性回归的形式为:(之所以这么写是因为的线性才是线性的所指) 线性回归模型有一下以下几个特征: 1. 2.x,y 通常取值连续 3.y的分布为正态分布或接近正态. 广义线性模型进行了如下推广: 1 ...

  5. 数字信号处理--FFT

    FFT是离散傅立叶变换的快速算法,可以将一个信号变换到频域.有些信号在时域上是很难看出什么特征的,但是如果变换到频域之后,就很容易看出特征了.这就是很多信号分析采用FFT变换的原因.另外,FFT可以将 ...

  6. Java和.NET使用DES对称加密的区别

    Java和.NET的系统类库里都有封装DES对称加密的实现方式,但是对外暴露的接口却各不相同,甚至有时会让自己难以解决其中的问题,比如Java加密后的结果在.NET中解密不出来等,由于最近项目有跨Ja ...

  7. fedora 24下修改IP

    在ROOT环境下 cd /etc/sysconfig/network-scripts 找到类似  ifcfg-enp1s0的文件 sudo vi ifcfg-enp1s0 HWADDR=XX:XX:X ...

  8. div+css的第一个布局

    ---恢复内容开始--- 这个东西说难也不难,但也要详细思虑一番: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  9. jquery的滑动

    (1)slideDown(speed,callback)方法:用于想下滑动的方法. $("#flip").click(function(){ $("#panel" ...

  10. linux命令（7）：mv命令

    mv命令 mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 1．命令格式: mv [选项] ...