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实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现的分页插件完整示例
May 26 jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 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二维数组排序与默认自然排序的方法介绍
2013/04/27 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
js+css在交互上的应用
2010/07/18 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
json数据的列循环示例
2013/09/06 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
[46:00]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第一局
2016/03/03 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python入门之modf()方法的使用
2015/05/15 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Django中的Model操作表的实现
2018/07/24 Python
python flask实现分页的示例代码
2018/08/02 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
一文了解python 3 字符串格式化 F-string 用法
2020/03/04 Python
django中嵌套的try-except实例
2020/05/21 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
2019教师的学习计划
2019/06/25 职场文书