js用类封装pop弹窗组件

2024-12-03 18:41:27

下面的弹出框组件使用的是类来封装的。一个弹窗组件通过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();
  };

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

关于vue.js弹窗组件的知识点总结

首先在开发时需要考虑以下三点: 1.进入和弹出的动画效果. 2.z-index 的控制 3.overlay 遮盖层关于动画 vue 对于动画的处理相对简单,给组件加入css transition 动画即可 <template> <div class="modal" transition="modal-scale">  </div> </template> <script&g
JS自动适应的图片弹窗实例

复制代码代码如下: /************************************自动适应的图片弹窗*********************************/ var autoImg=function(argcs){/*调整图片大小,等比例缩放argcs['maxHeight']=>最大高度,argcs['maxWidth']=>最大宽度,argcs['height']=>图片高度,argcs['width']=>图片宽度*/
js实现弹窗插件功能实例代码分享

目前测试下:支持IE6+ 火狐谷歌游览器等. 先来看看此组件的基本配置项:如下: 复制代码代码如下: this.config = { targetCls : '.clickElem', // 点击元素 title: '我是龙恩', // 窗口标题 content : 'text:<p style="width:100px;height:100px">我是龙</p>', //content : 'img
Js控制弹窗实现在任意分辨率下居中显示

贴代码复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv
js点击弹出div层实现可拖曳的弹窗效果

弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad
js弹窗代码可以指定弹出间隔

代码如下: 复制代码代码如下: <SCRIPT LANGUAGE="javascript"> var Time=10; //设置每次弹出的相格的时间以秒为单位,现在是一天 function Set(){ var Then=new Date(); Then.setTime(Then.getTime()+Time*1000); document.cookie="netbei=1;expires="+Then.toGMTString(); } var coo
js 右下角弹窗效果代码(IE only)

右下角弹窗效果练习 function $(obj){ return document.getElementById(obj); } function pop(obj){ var h = parseInt($("popDiv").currentStyle.height); $("popDiv").style.height = (h + obj) + "px"; if(parseInt($("popDiv").style.heig
js退出弹窗代码集合

var leave=true; function stbs() { if (leave) stb.DOM.Script.window.open('http://www.jb51.net/','_blank'); } [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 支持 Windows XP SP2 xp sp3(即支持IE7)的超级弹退代码使用说明: 1. 把SuperExitPopup.js这行 var popURL1 = 'http://tv.cnzz.cc'; 里面的网址改成
js弹窗返回值详解(window.open方式)

test.php 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-
js用类封装pop弹窗组件

下面的弹出框组件使用的是类来封装的.一个弹窗组件通过new一个实例来生成. 下面直接上代码: html结构: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> /*基本的样式*/ button{width: 1.6rem;height: 0.5rem;font-
Vue v-model组件封装(类似弹窗组件)

v-model是vue的一个语法糖,限制在input和textarea等这些表单元素中,官网所给的例子也是仅限于表单组件 Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on
在vue中封装的弹窗组件使用队列模式实现方法

前言由于业务需要,需要在封装的弹窗组件中引入定时器实现倒计时效果,但是如果同时触发两个弹窗,就会导致计时器bug,前一个弹窗的定时器没有被清除,倒计时就会错乱,此时想到的解决办法就是采用队列模式,将每一个需要的弹窗存到队列中,依次的将弹窗展示出来,同时清除定时器什么是队列队列(Queue)是先进先出(FIFO, First-In-First-Out)的线性表.在具体应用中通常用链表或者数组来实现.队列只允许在尾部进行插入操作(入队 enqueue),在头部进行删除操作(出队 dequeue
vue extend+promise封装全局弹窗组件

本文实例为大家分享了vue extend+promise封装全局弹窗组件的具体代码,供大家参考,具体内容如下因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理实现后的效果 // components/confirm文件 <template> <div class="popup-wrap" v-if="showPopup"> <div class="p
vue extend+promise封装全局弹窗组件

本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下因为项目没有引入第三方UI库,所以所有的公共组件都需要自己封装现在需要一个全局的弹窗,要有promise异步处理实现后的效果 // components/confirm文件 <template> <div class="popup-wrap" v-if="showPopup"> <div class="popup
element-ui 弹窗组件封装的步骤

封装el-dialog为一个组件我们在使用element-ui的时候,如果一个弹窗中的内容很多,那么我们经常会把这个弹窗封装成一个组件,如下:  <template> <el-dialog title="标题" :visible.sync="visible" width="720px" > <p>弹窗内容</p> </e
封装一个vue中也可使用的uniapp的全局弹窗组件(任何页面都可以弹出)

目录效果图: 场景: 思路: 第一步: 第二步: 第三部:使用总结效果图: 场景: 当你对接websocket时,或者轮询也好,你需要获取到最新的信息,并且在任何页面弹出一个组件进行后续操作思路: 1.先封装好要弹出的公共组件 2.向vue原型上挂载全局方法,拿到组件真实dom,从而对组件进行显隐操作第一步: 创建一个公共组件,以下是组件全部的结构及样式,你需要把html中的两个image标签的路径换掉或者直接注释掉也行,html 和 css就不做解释了 invite.vue <tem
vue.js封装switch开关组件的操作

我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定 <template> <label role="checkbox" :class="['switch', { toggled }]"> <input type="checkbox" class="switch-input" @change="t
vue.js基于ElementUI封装了CRUD的弹框组件

目录前言开始封装 json对象如下所示 table表头作为列表传入,数据结构如下在子组件中循环渲染出表头在父组件中调用前言代码写得不好,为什么不封装一下呢,如果用的是ElementUI框架,也可以在此基础上进行二次封装.譬如说,这个用来对列表数据进行增删改查的弹框. 开始封装原本只是个小功能,但是别的模块也需要用到. 我的想法就是,把弹框标题,table表头,必填字节,接口请求路径,增删改查CRUD,等等,放在一个json对象里面.通过父组件向子组件传参的方式,展示不同内容,调用不

js用类封装pop弹窗组件

相关推荐

随机推荐