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. python pymysql存储

    # _*_ coding:utf-8 _*_ import requests from bs4 import BeautifulSoup import re import pymysql def cr ...

  2. eclipse debug的时候提示debug Edit Source Lookup path

    原因可能是代码资源包未加载到debug的路径中,解决方法如下: Debug 视图下 ->在调试的线程上 右键单击 ->选择Edit Source Lookup Path ->选择Ad ...

  3. Adnroid_sdk安装代理

  4. ASP.NET - 单元测试

    Assert类的使用 Assert.Inconclusive() 表示一个未验证的测试: Assert.AreEqual() 测试指定的值是否相等,如果相等,则测试通过: AreSame() 用于验证 ...

  5. [Design]制作磨砂效果

    比较适合运用到网页或者APP的设计当中,推荐过来和飞特的朋友们一起分享学习了,先来看看最终的效果图吧 具体的制作步骤如下:

  6. POSIX 线程编程（二）线程建立与终止

    创建与终止线程 线程的管理常用的API有: pthread_create(thread,attr,start_routine,arg) pthread_exit(status) pthread_can ...

  7. POJ 1950

    直接DFS,因为实在没想到什么剪枝了... 注意一点是,10.11使用的是1011哦 #include <iostream> #include <cstdio> #includ ...

  8. java多线程具体总结

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

  9. php静态函数的使用场景

    php静态函数的使用场景 场景 代码 <?php class Conductor{ public static $i = 100; public function sold(){ $a = se ...

  10. 利用DBMS_SQLTUNE优化SQL

    DBMS_SQLTUNE优化SQL是在oracle10g才出来的新特性,使用它能很大程度上方便对sql的分析和优化.执行DBMS_SQLTUNE包进行sql优化需要有advisor的权限: stat& ...