PC端弹窗组件，js已经封装

依赖JQ，请先引用
html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="css/layer_pc.css">
<style>.ll-vip-btn{width: 240px;height:40px;line-height:40px;border-radius: 10px;border: 1px #2F7DCD solid; color: #2f7dcd;text-align: center;font-size:24px;display: inline-block;}
</style></head>
<body>
<div class="ll-vip-btn ll-layer1" >我是弹出层1</div>
<div class="ll-vip-btn ll-layer2" >我是弹出层2</div>
<div class="ll-vip-btn ll-layer3" >我是弹出层3</div>
<div class="ll-vip-btn ll-layer4" >我是弹出层4</div>
<div class="ll-vip-btn ll-layer5" id="text" >我是MSG</div><script src="js/jquery.min.js"></script><script src="js/layer_pc.js"></script>
<script>$(function () {//弹出信息提示   wk_msg(content,callback);参数content是内容；callback是回调函数，默认值0或不写；；$('.ll-layer5').click(function () {var content ='我是MSG！我是MSG我是MSG我是';wk_msg(content);});// wk_layer(a,b,c,d,e,callback)参数a是宽度，b是高度，c是弹窗定位高度，默认是0，自定义值（0-100）；d是按钮配置，默认是0，关闭按钮是1,单按钮是2，双按钮是3；e是内容,callback是回调函数，只有点击确定按钮后才执行；$('.ll-layer1').click(function () {var bda ='弹出层，可以自定义大小';wk_layer(600,300,10,0,bda);$('.ll-cancel').click(function () {alert(11)})});$('.ll-layer2').click(function () {var bda ='弹出层，带关闭按钮，可以自定义大小';wk_layer(600,300,40,1,bda);$('.ll-cancel').click(function () {alert(22)})});$('.ll-layer3').click(function () {var bda ='弹出层，带确定按钮，可以自定义大小';wk_layer(600,300,0,2,bda,function () {alert('回调')});$('.ll-cancel').click(function () {alert(33)})});$('.ll-layer4').click(function () {var bda ='弹出层，带双按钮，可以自定义大小';wk_layer(600,300,0,3,bda);$('.ll-cancel').click(function () {alert(44)})})})
</script></body>
</html>

JS代码：（layer_pc.js）

//公共弹出组件；
// 依赖JQ和common.css,请先引用；
//
//
// by walker v2.0;//弹出层 wk_layer(a,b,c,d,e,callback)参数a是宽度，b是高度，c是弹窗定位高度，默认是0，自定义值（0-100）；d是按钮配置，默认是0，关闭按钮是1,单按钮是2，双按钮是3；e是内容；callback是回调函数，默认值为0或者不写，只有点击确定按钮后才执行；
function wk_layer(a,b,c,d,e,callback) {var layer_Width,layer_Height,layer_Top,layer_close,layer_btn,layer_cont;//宽度if (a == null || a === undefined || a === 0) {layer_Width = 500;//console.log('默认宽度500px');} else {layer_Width = a;//console.log('自定义宽度'+a);}
//高度if (b == null || b === undefined || b === 0) {layer_Height = 300;//console.log('默认高度300px');} else {layer_Height = b;//console.log('自定义高度'+b);}
//弹窗定位高度if (c === undefined ||c === 0) {layer_Top = '30';}else  {layer_Top = c;}
//弹窗按钮类型if (d == null || d === undefined || d === 0) {layer_close ='';layer_btn = '';}else if(d===1) {layer_close = '<div class="wk-close">X</div>';layer_btn = '';}else if(d===2) {layer_close ='';layer_btn = '<div class="wk-btn wk-submit">确定</div>';}else if(d===3) {layer_close ='';layer_btn = '<div class="wk-btn " ><div class="wk-symmetry wk-cancel wk-font-gray">取消</div><div class="wk-symmetry wk-submit">确定</div></div>';}
//内容if (e == null || e === undefined || e === 0) {layer_cont = '';}else if(e!=='') {layer_cont = e;}var marLeft = layer_Width / 2;var layerTop = "<div class=\"wk-pop\" style=\"width: " + layer_Width + "px;top:"+layer_Top+"%;margin-left:-" + marLeft + "px;\"><div style='height: "+ layer_Height +"px'>" + layer_cont +"</div>" +layer_close + "</div><div class=\"wk-mask\"></div>";$('body').append(layerTop);$('.wk-pop').append(layer_btn);$('.wk-mask').click(function () {$('.wk-pop').remove();$(this).remove();});$('.wk-close').click(function () {$('.wk-pop').remove();$('.wk-mask').remove();});$('.wk-btn').click(function () {$('.wk-pop').remove();$('.wk-mask').remove();});$('.wk-submit').click(function () {if (callback == null || callback === undefined || callback === 0) {callback = null;}else if(callback!=null){callback();}});}//弹出信息提示   ll_msg(content,callback);参数content是内容；callback是回调函数，默认值0或不写；
function wk_msg(content,callback) {var msgW = 400;var marLeft = msgW / 2;var msgTop = "<div class=\" wk-msg\"  style=\"width:"+msgW+"px;margin-left:-" + marLeft + "px;\">" + content + "</div>";$('body').append(msgTop);setTimeout(function () {$('.wk-msg').remove();if (callback == null || callback === undefined || callback === 0) {callback = null;}else if(callback!=null){callback();}},2500);}

css代码：（common.css）

/*弹窗组件*/
.wk-mask{position: fixed;top:0;left:0;right:0;bottom:0;background: rgba(0,0,0,.3);z-index: 999;}
.wk-close{position:absolute;right:10px;top:10px;width:30px;height:30px;line-height:30px;text-align:center;font-size:20px;color: #999;z-index: 99999;border-radius: 100%;background: #d8d8d8;border: 1px #ccc solid;}
.crm-btn{width:100%;display:table;border:1px #ccc solid;text-align:center;color: #007aff;height: 45px;line-height: 45px;font-size: 18px;}
.wk-symmetry{width: 50%;display: table-cell;height: 45px;line-height: 45px;}
.wk-symmetry:first-child{border-right:1px #ccc solid;color: #666666; }
.wk-pop{position: fixed;overflow:hidden;-moz-box-shadow: 0 0 25px rgba(0,0,0,.3);-webkit-box-shadow: 0 0 25px rgba(0,0,0,.3);box-shadow: 0 0 25px rgba(0,0,0,.3);height: auto;left:50%;z-index:9999;background: #fff;border-radius:20px;}
.wk-msg{position: fixed;height: auto;overflow:hidden;-moz-box-shadow: 0 0 25px rgba(0,0,0,.2);-webkit-box-shadow: 0 0 25px rgba(0,0,0,.2);box-shadow: 0 0 25px rgba(0,0,0,.2);padding:20px;font-size:18px;line-height:22px;text-align:center;color:#fff;word-break:break-all;word-wrap:break-word;left:50%;top:40%;z-index:9999;background:rgba(0,0,0,0.7);border-radius:10px;}
.wk-btn-small{width: 80px;height: 30px;line-height: 30px;text-align: center;color: #fff;border-radius: 2px;margin: 0 10px;font-size: 12px;background: #007aff;display: inline-block}
.wk-btn-small:hover{color: #fff;}

PC端弹窗组件，js已经封装相关推荐

android弹窗不能手动关闭_vue3.0系列：Vue3自定义PC端弹窗组件V3Layer
今天给大家分享的是Vue3系列之自定义桌面端对话框组件v3layer. V3Layer 基于vue3.0构建的多功能PC网页端弹窗组件.拥有超过10+种弹窗类型.30+种参数配置,支持拖拽(自定义拖拽 ...
vue PC端弹窗组件封装
在项目中,需要做一个可以任意更改颜色的弹窗,找了一些组件,发现都不是自己想要的,打算自己动手写一下. 先看看效果图实现的效果主要是可以自由更改按钮文字的大小,背景色等接下来看看我操作的代码首先, ...
PC端页面调用QQ聊天 - 封装篇
PC端页面调用QQ聊天 - 封装篇今天收到网页留言,说因为兼容性的问题,他提供了有新的调用QQ代码的方式. 这里苏查了一下别人的源码,研究学习了一下.剥离贴出来,供大家参考学习. 来自用户tyj10 ...
html浏览器pc端禁止缩放,阻止pc端浏览器缩放js代码
阻止pc端浏览器缩放js代码众所周知:移动端页面禁止用户缩放界面只需加上即可,但是pc端确实比较麻烦,用户可以通过如下几种方式来缩放: windows: ctrl + +/- ctrl + 滚轮浏 ...
PC端微信浏览器js点击事件失效
**电脑端微信浏览器js点击事件失效**前段时间发现开发的一个微信公众号上一个按钮的点击事件在手机上是正常的,电脑端手机微信里却不起作用.在网上找了好久都没有找到解决办法.后来查看其它的页面的同样的点 ...
JavaScript - PC 端通过纯 js 播放音频文件（播放提示音）
前言有时候,我们可能有这样一个需求,当到达条件时,网页会播放一个提示音告知用户. 实现当然,你也可以写一个 <audio> </audio> 标签,通过 js 获取 DOM ...
css PC端弹窗时禁止底部页面滚动
代码: <script> export default {name: "",data () {return {showDlg: false}},watch: {},cr ...
Vue常用组件库的比较分析（pc端）
前言: Vue.js(读音 /vjuː/, 类似于 view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学 ...
PC端js禁止浏览器缩放
在网上找了很多资料,多多少少都有一些问题,现在重新整理一下. 1.网上的资料大多都是按照windows的devicePixelRatio来判断是否缩放的,这个判断不是很准确,因为在mac下,默认的de ...

PC端弹窗组件，js已经封装

PC端弹窗组件，js已经封装相关推荐

最新文章

热门文章