jQuery弹框插件使用方法详解


Posted in jQuery onMay 26, 2020

本文实例为大家分享了jQuery弹框插件使用的具体代码,供大家参考,具体内容如下

要点 :

1、匿名函数包裹器(可搜索一下)
2、面向对象的编程
3、插件的要素(扩展jQuery本身的方法,$.extend ; 给jQuery对象添加方法,对jQuery.prototype进行扩展 ;添加一个函数到jQuery.fn(jQuery.prototype)对象,该函数的名称就是你的插件名称)
4、代码部分: 注意html中 a 标签的内容 , js中格式的注意 , css的话嫌麻烦你可以自己定义
5、优点: 引用插件 后 , 标签书写正确 , 无须再调用插件名可直接显示弹框

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>用户管理-员工管理</title>
 <!-- <link rel="stylesheet" href="../css/main-style.css" >
 <link rel="stylesheet" href="../css/part-style.css" >
  <style type="text/css">

 .input-new-content>.input-list>select{
 width: 380px;
 height: 45px;
 border: 1px solid #ddd;
 border-radius: 5px;
 margin-top: 13px;
 text-indent: 10px;
 }

 </style> -->
 </head>

 <body>

 <!-- container-part -->
 <div id="container-part">

 <!-- part-display-content -->
 <div id="display-content">
   <a href="#changeable-box" type="open">click me</a>
 </div>

 </div>


 <div id="changeable-box" style="display: none">
 <div class="change-password-content">
 <div class="title-to-change">
  <p>标题</p>
  <a class="close-this-content" href="#changeable-box" type="close"></a>
 </div>
 <div class="input-new-content">
   <div class="input-list">
  <select class="" name="">
  <option value=""></option>
  </select>
  </div>
  <div class="input-list">
  <input type="text" name="" value="">
  </div>
  <div class="input-list">
  <input type="text" name="" value="" placeholder="确认密码">
  </div>
 </div>
 <div class="choose-newPassword-status">
  <a class="save-newPassword" href="#changeable-box" type="close">保存</a>
  <a class="cancel-changePassword" href="#changeable-box" type="close">取消</a>
 </div>
 </div>
 </div>

 <!-- <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> jquery引用-->
 <script type="text/javascript">
 ;(function($ , window , document , undefined){
 $.jModal = function(ele , opt) {
  var target;
  this.$body = $('body');
  this.options = $.extend({} , $.jModal.defaults , opt);
  this.blocker = $('<div class="shadowblock"></div>');
  target = ele.attr('href');
  this.$elm = $(target)
  if (ele.attr('type') == 'open') {
  this.open();
  }
  else if (ele.attr('type') == 'close'){
  this.hide();
  }
  else {
  return false
  }
 }

 $.jModal.prototype = {

 open: function(){
  this.$elm.css({
  position: 'fixed',
  width: '440px',
  height: 'auto',
  fontSize: 'var(--base-font-size)',
  color: '#515355',
  background: '#fff',
  boxShadow: '0 0 2px 1px #eee',
  top: '50%',
  left: '50%',
  transform: 'translate(-50% , -50%)',
  zIndex: 3
  });

  if (this.options.showSpinner) {
  this.showSpinner()
  }
  this.show()
 },

 // 遮罩显示
 showSpinner: function() {
  this.blocker.css({
  position: 'fixed',
  width: '9999vw',
  height: '9999vh',
  left: 0,
  top: 0,
  background: '#000',
  opacity: .7,
  zIndex: 2,
  })
  this.$body.append(this.blocker);
 },

 // 弹框显示
 show: function() {
  this.$elm.show()
 },

 // 隐藏弹框 & 移除遮罩
 hide: function() {
  this.$elm.hide()
  $('.shadowblock').remove();
 }
 }

 $.jModal.defaults = {
 showSpinner: false ,
 }

 $.fn.jModal = function(options) {
 new $.jModal(this , options)
 return this
 }

 $(document).on('click' , 'a' , function(event){
 event.preventDefault()
 $(this).jModal()
 })
 })(jQuery , window , document)
 </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现的分页插件完整示例
May 26 #jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 #jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 #jQuery
jquery更改元素属性attr()方法操作示例
May 22 #jQuery
jquery绑定事件 bind和on的用法与区别分析
May 22 #jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
You might like
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
javascript动态加载三
2012/08/22 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
基于jquery实现日历签到功能
2020/09/11 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
bootstrap table实例详解
2017/01/06 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
jQuery cookie的公共方法封装和使用示例
2020/06/01 jQuery
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python实现视频下载功能
2017/03/14 Python
老生常谈python之鸭子类和多态
2017/06/13 Python
python构建自定义回调函数详解
2017/06/20 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
任意存:BOXFUL
2018/05/21 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
和谐社区口号
2014/06/19 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
诚信承诺书
2015/01/19 职场文书
大明湖导游词
2015/02/03 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers