js用类封装pop弹窗组件


Posted in Javascript onOctober 08, 2017

下面的弹出框组件使用的是类来封装的。一个弹窗组件通过new一个实例来生成。

下面直接上代码:

html结构:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    /*基本的样式*/
    button{width: 1.6rem;height: 0.5rem;font-size: 0.3rem;line-height: 0.5rem;background: red;color: white;font-weight: bold}
    .hide{display: none;}
    .js-pop{
      width: 100%;
      height: 100%;
      z-index: 100;
      position: absolute;
      top:0;
      left: 0;
      font-size: 0.24rem;
    }
    .js-pop .mask{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      opacity: 0.2;
    }
    .js-pop .content{
      position: fixed;
      top: 50%;
      left: 50%;
      width: 5.80rem;
      height: 4.81rem;
      margin: -2.405rem 0 0 -2.9rem;
      background: url("pop-bg.png") no-repeat;
      background-size: contain;
      color: #262626;
      text-align: center;
    }
    .js-pop .content .close{
      position: absolute;
      top: .25rem;
      right: .08rem;
      width: .54rem;
      height: .48rem;
      z-index: 4;
      cursor:pointer;
    }
    .js-pop .content .prize-title {
      height: .39rem;
      min-width: 1.77rem;
      margin: .28rem auto;
      line-height: 0.39rem;
      color: white;
      text-align: left;
      text-indent: 1rem;
    }
    .js-pop .content .prize-content {
      color: #a40000;
      font-size: .24rem;
      margin:0 0.1rem 0 0.49rem;
      line-height: 0.4rem;
      width: 5.2rem;
    }
  </style>
</head>
<body>
<button id="bb">显示弹窗</button>
<div class="js-pop js-prize-pop hide" id="popLogin">
  <div class="mask"></div>
  <div class="content">
    <div class="close"></div>
    <div class="prize-title">温馨提示</div>
    <div class="prize-content" style="margin-top: 1rem">
      登录后才能参与活动哦!
      <br/>
      自动登录跳转中......
    </div>
  </div>
</div>
<!--引入jquery-->
<script type="text/javascript" src="http://image.37wan.cn/common/js/jquery-1.9.1.min.js"></script>
<!--引入Pop组件-->
<script src="pop.js"></script>
<script>
//  rem代码
  var windowW = $(window).width();
  var ratio = windowW/640;
  $("html").css("fontSize",100*ratio+"px");
  $(window).on("resize",function(){
    var windowW = $(window).width();
    var ratio = windowW/640;
    $("html").css("fontSize",100*ratio+"px");
  });
//new一个Pop实例
  var popLogin=new Pop($("#popLogin"));
  $("#bb").on("click",function(){
    popLogin.open();
  });

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

pop.js代码:

//Pop的构造函数
  var Pop=function(wrap,option){
    var $this=this;
    var opt={
      closeCall:null
    };
    $.extend(opt,option);
    var mask=wrap.find(".mask");
    //特权方法:1、open();2、close();3、setPrize();4、setContent()控制弹窗内显示的内容
    this.open=function(){
      wrap.show();
      mask.show();
    };
    this.close=function(callbalck){
      wrap.hide();
      mask.hide();
      opt.closeCall&&callbalck();
    };
    this.setPrize=function(text){
      wrap.find(".js-prize").text(text);
    };
    this.setContent = function (text) {
      wrap.find(".js-content").text(text);
    };
    function events(){
      wrap.on("click",".close",function(e){
        e.stopPropagation();
        $this.close(opt.closeCall);
      });
    }
    events();
  };

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
js实现随机点名功能
Dec 23 Javascript
利用js编写网页进度条效果
Oct 08 #Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 #Javascript
JS动态修改网页body的背景色实例代码
Oct 07 #Javascript
JS实现简单表格排序操作示例
Oct 07 #Javascript
javascript数组定义的几种方法
Oct 06 #Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 #Javascript
node.js中http模块和url模块的简单介绍
Oct 06 #Javascript
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
php单链表实现代码分享
2016/07/04 PHP
PHPCMS V9 添加二级导航的思路详解
2016/10/20 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
Python框架Flask的基本数据库操作方法分析
2018/07/13 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
如何基于python测量代码运行时间
2019/12/25 Python
3种python调用其他脚本的方法
2020/01/06 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
HTML5之语义标签介绍
2016/07/07 HTML / CSS
出国签证在职证明
2014/01/16 职场文书
企业金融服务方案
2014/06/03 职场文书
服装设计专业自荐信
2014/06/17 职场文书
会议室标语
2014/06/21 职场文书
幼儿园中班教师个人总结
2015/02/05 职场文书
2015年监理工作总结范文
2015/04/07 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
入团介绍人意见范文
2015/06/04 职场文书
详解Redis复制原理
2021/06/04 Redis
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android
Flink 侧流输出源码示例解析
2022/09/23 Servers