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 相关文章推荐
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
webix+springmvc session超时跳转登录页面
Oct 30 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
在Vue项目中使用Typescript的实现
Dec 19 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
Vue实现简单的跑马灯
May 25 Javascript
javascript实现固定侧边栏
Feb 09 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
深入apache host的配置详解
2013/06/09 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
2020/10/02 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python多线程方式执行多个bat代码
2016/06/07 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
Python中常见的数制转换有哪些
2020/05/27 Python
python打开音乐文件的实例方法
2020/07/21 Python
大学生的自我鉴定范文
2014/01/21 职场文书
学生请假条格式
2014/04/11 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
奖励申请报告范文
2015/05/15 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
九年级语文教学反思
2016/03/03 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏