文档章节

组件--弹出层

0000001
 0000001
发布于 2015/09/06 11:14
字数 493
阅读 99
收藏 2

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
     *{
          padding: 0;
          margin: 0;
     }
   
     .pop{
          position: fixed;
          width: 100px;
          height: 100px;
          background-color: #aaa;
          border:1px solid #ccc;
          z-index:99;
     }
     .title{
          height: 30px;
          background-color: gray;
          color:#fff;
     }
     #mark{ position: absolute; z-index:1; width:100%; height:100%; background-color: #000; filter:alpha(opacity=70); opacity: 0.7; top:0; left:0;}
</style>
</head>
<body>
    <input type="button" value="btn1" />
    <input type="button" value="btn1" />
    <input type="button" value="btn1" />
     <!-- <div div="pop">
          <div class="title">
               <h2>title</h2>
          </div>
          <div class="content">
               content
          </div>
     </div> -->
     <!-- <div id="mark"></div> -->
    <script type="text/javascript">
         window.onload = function(){
              var abtn = document.getElementsByTagName('input');

              abtn[0].onclick = function(){
                   var d1 = new pop(); //生成一个实例
                        d1.init({ //初始化实例,第一个走默认配置
                             iNow : 0

                        });
                      
              }
              abtn[1].onclick = function(){
                   var d1 = new pop(); //生成一个实例
                        d1.init({ //初始化实例,设置配置项
                             iNow : 1,
                             width: 200,
                             height: 200,
                             dir   : 'right',
                             title : ' ',
                             mark  : true
                        });

              }
         }

         function pop(){ //构造函数,模版
              this.isPop = null;
              this.setting = { //默认参数
                   width: 300,
                   height:300,
                   dir   : 'center',
                   mark  : false
              }
         };
         pop.prototype.json = {};

         pop.prototype.init=function(opt){
              extend(this.setting, opt);//for in继承

              if(this.json[opt.iNow] == undefined){
                   this.json[opt.iNow] = true;
              }
              if(this.json[opt.iNow]){
                   this.create();  //创建弹出框对象          
                   this.setClose(); //定义关闭按钮
                   //定义遮罩
                   if(this.setting.mark){
                        this.setMark();
                   }
                   this.json[opt.iNow] = false;
              }

         }
         //创建弹窗
         pop.prototype.create = function(){
              //创建弹框html
              this.isPop = document.createElement('div');
              this.isPop .className = 'pop';
              this.isPop .innerHTML = '<div class="title"><h2>title</h2></div><em id="close">关闭</em><div class="content">content</div>';
              document.body.appendChild(this.isPop);
              this.setStyle(); //设置弹框样式
            
         }
         pop.prototype.setMark = function(){
              //创建遮罩层
              var oMark = document.createElement('div');
              oMark.id = 'mark';
              //追加遮罩html到页面中
              document.body.appendChild(oMark);
              //设置遮罩层样式
              oMark.style.width = setViewW() + 'px';
              oMark.style.height = setViewH() + 'px';
              this.oMark = oMark;
            
         }
         pop.prototype.setStyle = function(){
              //设置pop的宽高
              this.isPop.style.width = this.setting.width+'px';
              this.isPop.style.height = this.setting.height+'px';
              //alert(setViewH());
              //判断在窗口的位置
              if(this.setting.dir == 'center'){
                   this.isPop.style.left = (setViewW() - this.isPop.offsetWidth)/2 + 'px';
                   this.isPop.style.top = (setViewH() - this.isPop.offsetHeight)/2 + 'px';
              }else if(this.setting.dir == 'right'){
                   this.isPop.style.left = (setViewW() - this.isPop.offsetWidth) + 'px';
                   this.isPop.style.top = (setViewH() - this.isPop.offsetHeight) + 'px';
              }
            
         }
         //定义关闭功能
         pop.prototype.setClose = function(){
              var closeBtn = this.isPop.getElementsByTagName('em')[0];
              var _this = this;
                   closeBtn.onclick = function(){
                        document.body.removeChild(_this.isPop); //移除弹出层
                        //移除遮罩层
                        if(_this.setting.mark){
                             document.body.removeChild(_this.oMark);
                        }
                        _this.json[_this.setting.iNow] = true;
                   }
                 
         }
         //封装可视区宽高
         function setViewW(){
              return document.documentElement.clientWidth;
         }
         function setViewH(){
              return document.documentElement.clientHeight;
         }

         //##
         function extend(c, p){
              for(var attr in p){
                   c[attr] = p[attr];
              }
         }

         //
    </script>
</body>
</html>

© 著作权归作者所有

下一篇: part1
0000001
粉丝 34
博文 141
码字总数 46256
作品 0
朝阳
前端工程师
私信 提问
mini-firework/vue-bulma-dialog

Vue Bulma Dialog 当前版本: 该组件是基于vue2 、 bulma0.5.3 完成的弹出层组件。 配置灵活 使用方便 上手快 配置灵活 自定义标题 自定义宽度 高度自适应 弹层内容可以是html,也可以是组件...

mini-firework
2017/09/17
0
0
微信小程序开发03-这是一个组件

编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件...

叶小钗
2018/07/30
0
0
UI组件库从1到N开发心得-组件篇

距离第一篇UI组件库文章发布已经过去3个月了,在此期间利用零零散散的时间持续更新owl-ui组件库,目前owl-ui移动端组件库已经更新3大类(基础、表单、弹出层)9种组件(Button、Tabs、Input...

D文斌
05/20
0
0
在React中实现点击空白区域关闭指定元素的实现

从一个简单需求讲起 当我们自定义了一个弹出组件时,一个常见的需求就是要点击除了这块弹出层之外的空白区域将这个弹出层关掉。你可能会说,这还不简单,利用事件冒泡机制,在上加一个监听事...

西风瘦码
07/18
0
0
微信小程序开发04-打造自己的UI库

前言 github地址:https://github.com/yexiaochai/wxdemo 接上文继续,我们前面学习了小程序的生命周期、小程序的标签、小程序的样式,后面我们写了一个简单的loading组件,显然他是个半成品...

叶小钗
2018/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android面试常客之Handler全解

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/fnhfire_7030/article/details/79518819 前言:又到了一年...

shzwork
21分钟前
4
0
position sticky 定位

本文转载于:专业的前端网站➫position sticky 定位 1、兼容性 https://caniuse.com/#search=sticky chrome、ios和firefox兼容性良好。 2、使用场景 sticky:粘性。粘性布局。 在屏幕范围内时...

前端老手
27分钟前
4
0
CentOS 7 yum 安装 PHP7.3 教程

参考:https://www.mf8.biz/centos-rhel-install-php7-3/ 1、首先安装 EPEL 源: yum install epel-release 安装 REMI 源: yum install http://rpms.remirepo.net/enterprise/remi-release......

dragon_tech
42分钟前
4
0
Linux物理网卡聚合及桥接

Linux内部实现的bridge可以把一台机器上的多张网卡桥接起来,从而把自己作为一台交换机。同时,LInux bridge还支持虚拟端口,即桥接的不一定都是物理网卡接口,还可以是虚拟接口。目前主要表...

xiangyunyan
43分钟前
4
0
一起来学Java8(一)——函数式编程

在这篇文章中,我们将了解到在Java8下如何进行函数式编程。 函数式编程 所谓的函数式编程就是把函数名字当做值进行传递,然后接收方拿到这个函数名进行调用。 首先来看下JavaScript如何进行函...

猿敲月下码
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部