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 相关文章推荐
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
JavaScript中的闭包原理分析
Mar 08 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
javascript获取select标签选中的值
Jun 04 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JS函数本身的作用域实例分析
Mar 16 Javascript
解决vue scoped html样式无效的问题
Oct 24 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 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文件上传实例详解!!!
2007/01/02 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP实现163邮箱自动发送邮件
2016/03/29 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
js tab效果的实现代码
2009/12/26 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python多进程库multiprocessing中进程池Pool类的使用详解
2017/11/24 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
小学生一分钟演讲稿
2014/08/26 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python