弹窗组件的开发

2019-05-22 06:33:54来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、需求分析

  开发过程中弹窗是必不可少的,如果我们每次需要弹窗都要重新开发,既浪费了人力又影响了性能,那么组件是不错的选择。

二、先写样式

  <style>

* {
  margin: 0;
  padding: 0;
}
.login {
  background: #fff;
  border: 1px solid #000;
  position: absolute;
  left: 0;
  top: 0;
}
.title {
  width: 100%;
  height: 30px;
  background: #333;
  color: #fff;
}
.title .close {
  display: block;
  float: right;
}
</style>

  *对应的 html标签如下,先注释掉,一会动态加进body。

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

三、body的内容

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

四、脚本

<script>
    window.onload = function() {
      var aInput = document.getElementsByTagName('input');
        aInput[0].onclick = function() {
        var d1 = new Dialog();
        d1.init(); // 这里走默认配置
      }
      aInput[1].onclick = function() {
        var d1 = new Dialog();
        d1.init({
          dir: 'right' // 自定义配置
        });
      }
    }
 
    function Dialog() {
      this.oLogin = null;
      this.settings = { // 默认配置
        w: 300,
        h: 300,
        dir: 'center'
      }
    }
    Dialog.prototype.init = function(opt) {
      extend(this.settings, opt);
      this.create();
    }
    Dialog.prototype.create = function() {
      this.oLogin = document.createElement('div');
      this.oLogin.className = 'login';
      this.oLogin.innerHTML = `<div class="title">
                     <span>111</span><span class="close">X</span>
                    </div>
                    <div class="content"></div>`;
      document.body.appendChild(this.oLogin);
      this.setData();
    }
    Dialog.prototype.setData = function() {
      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';
      } else if (this.settings.dir == 'right') {
        this.oLogin.style.left = (viewWidth() - this.oLogin.offsetWidth) + 'px';
        this.oLogin.style.top = (viewHeight() - this.oLogin.offsetHeight) + 'px';
      }
    }
 
    // 合并对象
    function extend(obj1, obj2) {
      for (var attr in obj2) {
        obj1[attr] = obj2[attr];
      }
    }
    // 获取可视区的宽
    function viewWidth() {
      return document.documentElement.clientWidth;
    }
    // 获取可视区的高
function viewHeight() {
return document.documentElement.clientHeight;
}
</script>

五、运行效果图

点击第一个按钮弹出中间的弹窗;

点击第二个按钮弹出右下角的弹窗;

 

  

 

 

原文链接:https://www.cnblogs.com/hyshi/p/10901949.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:D3.js 动画 过渡效果 (V3版本)

下一篇:vue 地图可视化 maptalks 篇