• 原生js制作弹出框


    完整代码

      1 <!DOCTYPE html>
      2 <html>
      3     <head>
      4         <meta charset="UTF-8">
      5         <title></title>
      6         <style type="text/css">
      7             *{
      8                 margin: 0px;
      9                 padding: 0px;
     10             }
     11             
     12             #mask{
     13                 background-color: black;
     14                 opacity: 0.3;
     15                 position: absolute;
     16                 top: 0px;
     17                 left: 0px;
     18                 z-index: 10;
     19             }
     20             #kuang{
     21                 width: 400px;
     22                 height: 300px;
     23                 background-color: blueviolet;
     24                 position: absolute;
     25                 z-index: 888;
     26                 left: 200px;
     27                 top: 250px;
     28                 
     29             }
     30             #close{
     31                 width: 50px;
     32                 height: 50px;
     33                 background-color: red;
     34                 position: absolute;
     35                 top: 5px;
     36                 right: 5px;
     37                 z-index: 999;
     38             }
     39             #close:hover{
     40                 cursor: pointer;
     41             }
     42         </style>
     43         
     44     </head>
     45     <body>
     46         <input  type="button" value="登陆"  onclick="show( )"/>
     47         
     48         <br />111
     49         <br />111
     50         <br />111
     51         <br />111
     52         <br />111
     53         <br />111
     54         <br />111
     55         <br />111
     56         <br />111
     57         <br />111
     58         <br />111
     59         <br />111
     60         <br />111
     61         <br />111
     62         <br />111
     63         <br />111
     64         <br />111
     65         <br />111
     66         <br />111
     67         <br />111
     68         <br />111
     69         <br />111
     70         <br />111
     71         <br />111
     72         <br />111
     73         <br />111
     74         <br />111
     75         <br />111
     76         <br />111
     77         <br />111
     78         <br />111
     79         <br />111
     80         <br />111
     81         <br />111
     82         <br />111
     83         <br />111
     84         <br />111
     85         <br />111
     86         <br />111
     87         <br />111
     88         <br />111
     89         <br />111
     90         <br />111
     91         <br />111
     92         <br />111
     93         <br />111
     94         <br />111
     95         <br />111
     96         <br />111
     97         <br />111
     98         <br />111
     99         <br />111
    100         <br />111
    101         <br />111
    102         <br />111
    103         <br />111
    104         <br />111
    105         <br />111
    106         <br />111
    107         <br />111
    108         <br />111
    109         
    110         
    111     </body>
    112 </html>
    113 <script type="text/javascript">
    114     function  show( ){
    115 //        获取整个页面的宽和高
    116           var page_width =document.documentElement.scrollWidth;
    117         var page_height =document.documentElement.scrollHeight;
    118         
    119 //        获取浏览器的宽和高
    120         var b_width =document.documentElement.clientWidth;
    121         var b_height = document.documentElement.clientHeight;
    122         
    123 //        创建一个叫mask的div,id是#mask;
    124         var mask =document.createElement("div");
    125         mask.id ="mask";
    126         
    127         
    128 //        mask的宽和高
    129         mask.style.width =page_width +"px";
    130         mask.style.height = page_height +"px";
    131          
    132 //        在body里添加一个mask的子元素;
    133         document.body.appendChild(mask);
    134         
    135 //        创建一个叫kuang的div,id是#kuang;
    136         var kuang = document.createElement("div");
    137         kuang.id ="kuang";
    138          
    139 //        kuang 在浏览器水平和垂直居中
    140         kuang.style.left = (b_width - 400) / 2  +"px";
    141         kuang.style.top =( b_height -300) /2 +"px";
    142 //        在kuang里放一个div,id=close 
    143         kuang.innerHTML ='<div id ="close"></div>';
    144         
    145 //        在body里添加一个kuang的子元素;
    146         var ku =document.body.appendChild(kuang);
    147         alert(ku);
    148         ku.innerHTML+=222222222222222222;
    149 //        close做一个点击事件,关闭mask 和 kuang
    150         document.getElementById("close").onclick =function( ){
    151             document.body.removeChild(mask);
    152             document.body.removeChild(kuang);
    153         }
    154         
    155 //    mask做一个点击事件,关闭mask 和 kuang
    156         document.getElementById("mask").onclick =function( ){
    157             document.body.removeChild(mask);
    158             document.body.removeChild(kuang);
    159         }
    160       
    161     }
    162 </script>

    预览图:

  • 相关阅读:
    redis在centos7下安装(源码编译)
    Centos7之Gcc安装
    Jmeter工具之上传图片,上传音频文件接口
    什么是系统平均负载(Load average)
    sonar+Jenkins 构建代码质量自动化分析平台
    数据库主从相关配置参数说明
    现有数据库配置主从同步
    MySQL5.7多主一从(多源复制)同步配置
    MySQL5.7主从从配置
    MySQL5.7主从同步配置
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6256085.html
Copyright © 2020-2023  润新知