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

知识点:

　　1.javaScript 添加HTML标签

　　2.javaScript 添加HTML标签属性

　　3.javaScript 追加元素

代码献上:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        html,body{

            height:100%;

        }

        #box{

            width: 100%;

            height: 100%;

        }

        #content{

            position: relative;

            top: 150px;

            width: 200px;

            /*line-height: 200px;*/

            height: 200px;

            text-align: center;

            color: red;

            background: green;

            margin: auto;

        }

        #span1{

            position: fixed;

            background-color: red;

            top:0;

            right:0;

            width: 30px;

            height: 30px;

            line-height: 30px;

            text-align: center;

            color: #ffffff;

        }

    </style>

</head>

<body >

    <button id="btn">弹出</button>

</body>

    <script type="text/javascript">

        // 获取dom元素 1.获取事件源

        var oBtn = document.getElementById('btn');

        // 创建弹出模态框的相关DOM对象

        var oDive = document.createElement('div');

        var oP = document.createElement("p")

        var oSpan = document.createElement('span')

        // 设置属性

        oDive.id = 'box';

        oP.id = 'content';

        oSpan.innerHTML = 'X';

        oP.innerHTML = '恭喜IG获得S8冠军!';

        oSpan.id = 'span1;';

        // 追加元素

        oDive.appendChild(oP);

        oP.appendChild(oSpan);

        // 点击弹出按钮 弹出模态框

        oBtn.onclick = function(){

            // 动态的添加到body中一个div

            this.parentNode.insertBefore(oDive,oBtn)

        }

        // 点击x, 关闭模态框

        oSpan.onclick = function () {

            // 移除oDiv元素

            oDive.parentNode.removeChild(oDive)

        }

    </script>

</html>

JavaScript 实现简单的 弹出框关闭框的更多相关文章

  1. 第一百三十三节，JavaScript，封装库--弹出登录框

    JavaScript,封装库--弹出登录框 封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事 ...

  2. 代码录播：jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

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

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

  4. 解决PL/SQL Dev连接Oracle弹出空白提示框

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 没办法,只能自己研究,经过大概一天时间 ...

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

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

  6. PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享

    第一次安装Oracle,装在虚拟机中,用PL/SQL Dev连接远程数据库的时候老是弹出空白提示框,网上找了很久,解决方法也很多,可是就是没法解决我这种情况的. 出现这种问题,解决方法大概有这几种: ...

  7. bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题

    答案来自老外http://stackoverflow.com/questions/14795035/twitter-bootstrap-modal-blocks-text-input-field $( ...

  8. [UWP]在应用退出时弹出确认提示框

    1. 需求 在应用退出时(点击右上角的关闭按钮)弹出一个确认按钮可以说是一个最常见的操作了,例如记事本的"你是否保存": 但这个功能在UWP上居然有点小复杂.这篇文章将解释如何实现 ...

  9. 弹出JS提示框

    弹出JS提示框Page.ClientScript.RegisterStartupScript(typeof(string), "msg", "<script> ...

随机推荐

  1. [剑指offer] 50. 第一个只出现一次的字符 + map，hashmap 及其区别

    class Solution { public: int FirstNotRepeatingChar(string str) { map<char,int>mp; ;i<str.si ...

  2. 公司组织oracle培训的理解

    oracle执行机制 1.客户端发送一条sql给oracle服务器,oracle会看这条sql的执行计划是否存在缓存  如果存在则直接运行,如果不存在执行第二步. 2.如果不存在缓存 则会 进行语法检 ...

  3. struts配置 WEB得拷贝要注意的事项

    原始WEB文件tutoral===>新文件tutoralTest 要将靠拷贝的文件的contextRoot修改(一定要修改)

  4. 如何计算合适的InnoDB log file size

    原文链接:http://www.mysqlperformanceblog.com/2008/11/21/how-to-calculate-a-good-innodb-log-file-size/ Pe ...

  5. SQL--各种约束

    约束名称 含义 主键约束 定义一个唯一的标识符 外键约束 为了维护和主键表的数据完整性 check约束 限定表中某个列的值的范围 default约束 如果没有指定插入值,则插入默认值 unique约束 ...

  6. [Linux]第五部分-Linux系统管理员

    启动流程如下:1.加载BIOS信息,读取第一个启动设备代号2.读取第一个启动设备的Mbr引导程序的启动信息3.加载操作系统核心信息4.核心执行init程序并获取运行信息5.init执行 /etc/rc ...

  7. GA求解TSP

    遗传算法中包含了如下5个基本要素: (1)对参数进行编码: (2)设定初始种群大小: (3)适应度函数的设计: (4)遗传操作设计: (5)控制参数设定(包括种群大小.最大进化代数.交叉率.变异率等) ...

  8. java多线程具体总结

    一.Thread.start()与Thread.run()的差别 通过调用Thread类的start()方法来启动一个线程.这时此线程是处于就绪状态,并没有运行.然后通过此Thread类调用方法run ...

  9. 杭电1018-Big Number（大数）

    Big Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total ...

  10. 高斯混合模型Gaussian Mixture Model (GMM)——通过增加 Model 的个数，我们可以任意地逼近任何连续的概率密分布

    从几何上讲,单高斯分布模型在二维空间应该近似于椭圆,在三维空间上近似于椭球.遗憾的是在很多分类问题中,属于同一类别的样本点并不满足“椭圆”分布的特性.这就引入了高斯混合模型.——可以认为是基本假设! ...