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. redis各数据类型应用概述

    前言 redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存.亦可持久化的日志型.key-value数据库,并提供多种语言的API. 它是内存存储的数据结构服务器,可用作数据库.高速缓存 ...

  2. Java基础学习总结（35）——Java正则表达式详解

    在Sun的Java JDK 1.40版本中,Java自带了支持正则表达式的包,本文就抛砖引玉地介绍了如何使用java.util.regex包. 可粗略估计一下,除了偶尔用Linux的外,其他Linu  ...

  3. Ajax json jquery实现菜单案例

    需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...

  4. BA-siemens-apogee-ppcl

    adapts函数的使用 常规控制风机及阀门的程序是使用PID来调节,但是自适应算法能更好的调节. 西门子的自适应调节函数adapts用法如下: 以下文章为网络转载,原文链接地址http://news. ...

  5. BA--暖通系统常见设计细节要点

    (一)系统设计问题 1.水泵在系统的设计位置: 一般而言,冷冻水泵应设在冷水机组前端,从末端回来的冷冻水经过冷冻水泵打回冷水机组:冷却水泵设在冷却水进机组的水路上,从冷却塔出来的冷却水经冷却水泵打回机 ...

  6. BA-siemens-PXM液晶面板

    PXM面板作用:可以查看模块内部的信息,可以触发控制点来近程控制模块上的点位(非常便于现场调试). 优点:1.便于现场紧急控制,有些地方是必须要加上的,如工厂控制等项目,假如机器死机,可以通过面板切换 ...

  7. Eclipse中项目去除Js验证

    删除项目.project文件中的 <buildCommand>   <name>org.eclipse.wst.jsdt.core.javascriptValidator< ...

  8. Oracle的JDBC Url的几种方式

    1.普通SID方式jdbc:oracle:thin:username/password@x.x.x.1:1521:SID2.普通ServerName方式 jdbc:Oracle:thin:userna ...

  9. Python Study （05）装饰器

    装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象作为某一 ...

  10. POJ 1777

    一道好题. 由算术基本定理,知: 那么,对于上式的每个因子值只能是2^M的形式.取第一个式子为例,通过分解因式出(1+p^2)=2^k知,a只能为1. 于是对于p只能是梅森素数.而且每个梅森素数只能出 ...