组件开发之弹窗-1

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件开发之弹窗-1相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件开发 弹窗 </title>
    <style type="text/css">
      *{
          margin: 0px;
          padding: 0px;
      }
        #box1{
            border: 1px solid black;
            position: absolute;
        }
        .head{
            height: 20px;
            background: #CCCCCC;
        }
        .right{
            float: right;
            cursor: pointer;
        }
    </style>
    </head>
    <body>
        <input type="button" value="按钮1" />
        <input type="button" value="按钮2" />
        <input type="button" value="按钮3" />
        <!--<div id="box1">
            
        </div>-->
          <script type="text/javascript">
           //只执行一次就叫单体模式
             window.onload=function()
             {
                  var ainput = document.getElementsByTagName("input");
                  ainput[0].onclick=function()
                  {

                      var d1 = new Drag();
                     d1.init({//配置参数
                           
                     });
                      
                  };
                   
             };
             function Drag()//属性
             {
                  this.ologin=null;//局部变量改变成属性
                this.settings={//默认参数
                    w:300,
                    h:300,
                    dir:"center"
                }
             }
             Drag.prototype.init=function(opt)//方法
             {
                    extend(this.settings,opt);
                    this.create();//动态创建弹窗
                    this.oclose();//动态创建关闭
                 
             };
             Drag.prototype.create=function()
             {
                  //var ologin =document.createElement("div");
                 this.ologin =document.createElement("div");
                      this.ologin.id="box1";
                      this.ologin.innerHTML=‘<div class="head"><span class="title">标题</span><span class="right">X</span></div><div class="content"></div>‘
               document.body.appendChild(this.ologin);

               this.setDate();//尺寸
             }
             Drag.prototype.setDate=function()
             { // ologin 属性因为找不到 所以要设置全局的
                 this.ologin.style.width = this.settings.w+"px";
                 this.ologin.style.height = this.settings.h+"px";
                 if(this.settings.dir == "center")
                 {
                  this.ologin.style.left = (viewWidth() - this.ologin.offsetWidth)/2 +"px";
                  this.ologin.style.top = (viewHeight() - this.ologin.offsetHeight)/2 +"px";
                 }
             }
             Drag.prototype.oclose=function()
             {
                   var oclose =document.getElementsByTagName("span")[1];
                   var _this = this;
                   oclose.onclick=function()
                   {
                       document.body.removeChild(_this.ologin);
                   }
                   
             }
             //-----------------------
             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>
      
    </body>
</html>

 

以上是关于组件开发之弹窗-1的主要内容，如果未能解决你的问题，请参考以下文章

Flutter学习基本组件之弹窗和提示(SnackBarBottomSheetDialog)

前端通用框架可行性研究报告之弹窗

ol之弹窗

前端开发之弹出框系列教程二：Confirm确认框

前端开发之弹出框系列教程四：Prompt提示输入框

前端开发之弹出框系列教程一：Alert提示框