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. jquery 去重

    var yearArray = new Array(2009, 2009, 2010, 2010, 2009, 2010); $.unique(yearArray); alert(yearArray) ...

  2. css文本两端对齐

    在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名, 手机号码, 出生地.这样我们就要用到 text-align, text-justify样式了. text-align直接设为justify就 ...

  3. Spring学习总结（18）——Spring整合Mysql数据库一主多从、多主多从配置

    一.新建jdbc.properties配置文件 master.jdbc.driverClassName=com.mysql.jdbc.Driver master.jdbc.url=jdbc:mysql ...

  4. hdu 1163

    别人的代码开始自己不知道什么数论解法: ab*ab=(a*10+b)(a*10+b)=a^2*100+2ab*10+b^2 所以the root digital=(a+b)*(a+b): 而数论中的定 ...

  5. 数据库连接池和connection的理解

    数据库连接池Data Source Pool的理解 1.数据库连接池允许应用程序重复使用一个现有的数据库连接,而不是再重新建立一个连接,避免了每个方法里new connection的耗费资源和时间. ...

  6. etymology-R

    1)vor = to eat devour vt. 狼吞虎咽地吃光: 吞没,毁灭: 目不转睛地看[de-向下+vour-吃] voracity  n.贪食,贪婪.拉丁词根vor-,vorac-表示吞食 ...

  7. 转载：手游安全破“黑”行动：向黑产业链说NO

    目前的手游市场已被称为红海.从业界认为的2013年的“手游元年”至今,手游发展可谓是既经历了市场的野蛮生长,也有百家争鸣的战国时代.如今,手游市场竞争已趋白热化,增长放缓.但移动互联网的发展大势之下, ...

  8. 【算法拾遗（java描写叙述）】--- 选择排序（直接选择排序、堆排序）

    选择排序的基本思想 每一趟从待排序的记录中选出关键字最小的记录,顺序放在已排好序的子文件的最后,知道所有记录排序完毕.主要有两种选择排序方法:直接选择排序(或称简单选择排序)和堆排序. 直接选择排序 ...

  9. RDIFramework.NET V2.9版本号 WinFom部分新增与修正的功能

    RDIFramework.NET  V2.9版本号 WinFom部分新增与修正的功能 转眼间RDIFramework.NET框架走了快6个年头了,随着一个版本号一个版本号的升级改造,如今已经越来越完美 ...

  10. POJ--1087--A Plug for UNIX【Dinic】网络最大流

    链接:http://poj.org/problem? id=1087 题意:提供n种插座.每种插座仅仅有一个,有m个设备须要使用插座,告诉你设备名称以及使用的插座类型,有k种转换器.能够把某种插座类型 ...