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 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
jQuery中get和post方法传值测试及注意事项
Aug 08 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
JS验证不重复验证码
Feb 10 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
JavaScript常用工具方法封装
Feb 12 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
夯基础之手撕javascript继承详解
Nov 09 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 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表单提交实例讲解
2015/11/12 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
jQuery 插件 将this下的div轮番显示
2009/04/09 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
angular实现表单验证及提交功能
2017/02/01 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
Node.js创建HTTP文件服务器的使用示例
2018/05/11 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
python定时关机小脚本
2018/06/20 Python
python三引号输出方法
2019/02/27 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
宣传活动总结范文
2014/07/01 职场文书
绿色校园广播稿
2014/10/13 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
Flask response响应的具体使用
2021/07/15 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
redis数据一致性的实现示例
2022/03/18 Redis