jQuery弹框插件使用方法详解

本文实例为大家分享了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>

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

赞 (0)

相关推荐

  • viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 支持键盘 支持全屏幻灯片模式(可做屏保) 支持缩略图 支持标题显示 支持多种自定义事件 Viewer.js 提供了纯 JS 版本和 jQuery 版本,版本名字虽然一样,但代码不一样,不能通用. 二.下载 纯JS版本: 下载地址:https://github.com/fengyuanchen/

  • jQuery实现的分页插件完整示例

    本文实例讲述了jQuery实现的分页插件.分享给大家供大家参考,具体如下: 呈现 html文件 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script src="引入一个jquery文件,这里就不提供了&

  • jquery插件懒加载的示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <script src="jquery-1.11.1.min.js&q

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    深入研究jQuery图片懒加载 lazyload.js使用方法

    lazyload是一个用Javascript编写的jQuery插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片将不会被载入,直到用户将它们滚动到它们所在的位置. 跟bootstrap一样,lazyload.js也是依赖于jQuery <script src="resources/js/jquery-1.8.3.min.js"></script> <script src="resources/js/jquery.lazyload.min

  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

    本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!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&qu

  • 基于jquery的图片懒加载js

    以下是实现代码(基于jquery): 复制代码 代码如下: function lazyload(option){ var settings={ defObj:null, defHeight:0 }; settings=$.extend(settings,option||{}); var defHeight=settings.defHeight,defObj=(typeof settings.defObj=="object")?settings.defObj.find("img

  • jquery实现异步加载图片（懒加载图片一种方式）

    首先将插件在jq后面引入 (function($) { // alert($.fn.scrollLoading); $.fn.scrollLoading = function(options) { var defaults = { attr: "data-url" }; var params = $.extend({}, defaults, options || {}); params.cache = []; $(this).each(function() { var node = t

  • jQuery插件实现图片轮播效果

    使用插件实现图片轮播效果: 通过设置传入的参数autoScroll,numControl和arrowControl的值可以显示不同的效果 图片轮播效果一:设置autoScroll=true,numControl=false,arrowControl=false,图片自动轮播,当鼠标进入时停止轮播,当鼠标移出时继续轮播: 图片轮播效果二:设置autoScroll=true,numControl=ture,arrowControl=false,图片自动轮播,同时当鼠标指向导航数字时显示相应的图片:

  • 详解jQuery lazyload 懒加载

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. Demo页面: 基本选项 淡入效果 对不支持JavaScript浏览器的降级处理 水平滚动 容器内水平滚动 容器内垂直滚动

  • JQuery插件tablesorter表格排序实现过程解析

    简介 Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的jQuery插件,无需再次刷新页面,支持多种单元格数据类型,例如数值.字符串.日期和自定义排序. 使用说明 引入jquery.tablesorter 所用文件下载: jquery-2.0.2.min.js jquery.tablesorter.min.js tablesorert官网 http://tablesorter.com 修改表格 html如下: <table class="table table-strip

随机推荐