原生js开发的弹框组件

最新推荐文章于 2024-06-12 16:19:00 发布

诸葛苍穹

最新推荐文章于 2024-06-12 16:19:00 发布

阅读量1.4k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/u012260672/article/details/50594938

版权

javaScript 专栏收录该内容

131 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en" ng-app = 'myApp' >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{ margin:0; padding:0;}
input { width:60px; height: 30px;}
.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;}
.title{ height:30px; line-height: 30px; background:gray; color:white;}
.title .close{ float:right; width:30px; height: 30px;  text-align: center;  cursor: pointer; line-height: 30px;}
</style>

<script type="text/javascript">

window.onload = function(){
    var aInput = document.getElementsByTagName("input");

  aInput[0].onclick = function(){

    var p1  = new oPop();
    p1.init({
      iNow : 0,
      title:"我是标题1",
      w : 300,
      h :300,
      dir:"center"
    })
  }

  aInput[1].onclick = function(){
    var p2  = new oPop();
    p2.init({
      iNow:1,
      title:"我是标题2",
      w :120,
      h :300,
      dir:"right"
    })
  }

  function oPop(){
    this.opoup = null;
    this.settings = {
      id : "login",
      w : 300,
      h: 200
    }
  }
  oPop.prototype.json = {}//为了防止多次点击,只能点击一次
  oPop.prototype.init = function(opt){
    extend(this.settings,opt);

    if( this.json[opt.iNow]==undefined){
       this.json[opt.iNow] = true;
    }

    if(this.json[opt.iNow]){
      this.create();
      this.close();
      this.json[opt.iNow] = false;
    }  
  }


  oPop.prototype.create = function(){//创建弹框DOM
    this.opoup = document.createElement("div");
    this.opoup.className = "login";
    this.opoup.innerHTML = '<div class="title"><span>'+this.settings.title+'</span><span class="close">×</span></div><div class="content"></div>';

    document.body.appendChild(this.opoup);

    this.opoup.style.width = this.settings.w + 'px';
    this.opoup.style.height = this.settings.h + 'px';


    if(this.settings.dir =="center"){

      this.opoup.style.left  = (viewWidth() - this.opoup.offsetWidth)/2 + 'px';
      this.opoup.style.top  = (viewHeight() - this.opoup.offsetHeight)/2 + 'px';

    }
    else if( this.settings.dir == 'right' ){
      this.opoup.style.left =  (viewWidth() - this.opoup.offsetWidth) + 'px';
      this.opoup.style.top =  (viewHeight() - this.opoup.offsetHeight) + 'px';
    }
  }


  oPop.prototype.close = function(){//右侧关闭按钮

    var aSpan = document.getElementsByTagName("span");
    var This = this;

    aSpan[1].onclick = function(){
      document.body.removeChild(This.opoup);
      This.json[This.settings.iNow] = true; //在关闭按钮的时候 变成true 然后下次可点击
    }
  }

  function viewWidth(){
    return document.documentElement.clientWidth;
  }

  function viewHeight(){
    return document.documentElement.clientHeight;
  }

  function extend ( obj1,obj2){
    for(var attr in obj2){
      obj1[attr] = obj2[attr];
    }
  }

}   

</script>

</head>
<body>

<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

<!--<div class="login">
  <div class="title">
      <span>标题</span><span class="close">X</span>
    </div>
    <div class="content"></div>
</div>-->

</body>
</html>

诸葛苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js开发的弹框组件

<!doctype html><html lang="en" ng-app = 'myApp' ><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css">*{ margin:0; padding:0;}input { width:60px; height: 30px;}.log
复制链接

扫一扫