☰

jqModal

jqModal plugin

此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.gf.qytechs.cn/scripts/3595/10865/jqModal.js 

  1. /*
  2.  * jqModal - Minimalist Modaling with jQuery
  3.  *
  4.  * Copyright (c) 2007-2014 Brice Burgess @IceburgBrice
  5.  * Dual licensed under the MIT and GPL licenses:
  6.  *   http://www.opensource.org/licenses/mit-license.php
  7.  *   http://www.gnu.org/licenses/gpl.html
  8.  * 
  9.  * $Version: 1.1.0 (2014.07.03 +r21)
  10.  * Requires: jQuery 1.2.3+
  11.  */
  12.  
  13. (function($) {
  14. 	
  15. 	/**
  16. 	 * Initialize a set of elements as "modals". Modals typically are popup dialogs,
  17. 	 * notices, modal windows, &c. 
  18. 	 * 
  19. 	 * @name jqm
  20. 	 * @param options user defined options, augments defaults.
  21. 	 * @type jQuery
  22. 	 * @cat Plugins/jqModal
  23. 	 */
  24. 	
  25. 	$.fn.jqm=function(options){
  26. 		return this.each(function(){
  27. 			var e = $(this),
  28. 				jqm = e.data('jqm') || $.extend({ID: I++}, $.jqm.params),
  29. 				o = $.extend(jqm,options);
  30. 			
  31. 			// add/extend options to modal and mark as initialized
  32. 			e.data('jqm',o).addClass('jqm-init');
  33. 			
  34. 			// ... Attach events to trigger showing of this modal
  35. 			o.trigger && e.jqmAddTrigger(o.trigger);
  36. 		});
  37. 	};
  38. 	
  39. 	
  40. 	/**
  41. 	 * Matching modals will have their jqmShow() method fired by attaching a
  42. 	 *   onClick event to elements matching `trigger`.
  43. 	 * 
  44. 	 * @name jqmAddTrigger
  45. 	 * @param trigger a selector String, jQuery collection of elements, or a DOM element.
  46. 	 */
  47. 	$.fn.jqmAddTrigger=function(trigger){
  48. 		return this.each(function(){
  49. 			if(!addTrigger($(this), 'jqmShow', trigger))
  50. 				err("jqmAddTrigger must be called on initialized modals")
  51. 		});
  52. 	};
  53. 	
  54. 	
  55. 	/**
  56. 	 * Matching modals will have their jqmHide() method fired by attaching an
  57. 	 *   onClick event to elements matching `trigger`.
  58. 	 * 
  59. 	 * @name jqmAddClose
  60. 	 * @param trigger a selector String, jQuery collection of elements, or a DOM element.
  61. 	 */
  62. 	$.fn.jqmAddClose=function(trigger){
  63. 		return this.each(function(){
  64. 			if(!addTrigger($(this), 'jqmHide', trigger))
  65. 				err("jqmAddClose must be called on initialized modals")
  66. 		});
  67. 	};
  68. 	
  69. 	
  70. 	/**
  71. 	 * Open matching modals (if not shown)
  72. 	 */
  73. 	$.fn.jqmShow=function(trigger){
  74. 		return this.each(function(){ !this._jqmShown&&show($(this), trigger); });
  75. 	};
  76. 	
  77. 	/**
  78. 	 * Close matching modals
  79. 	 */
  80. 	$.fn.jqmHide=function(trigger){
  81. 		return this.each(function(){ this._jqmShown&&hide($(this), trigger); });
  82. 	};
  83. 	
  84. 	
  85. 	// utility functions
  86. 	
  87. 	var
  88. 		err = function(msg){
  89. 			if(window.console && window.console.error) window.console.error(msg);
  90. 		
  91. 		
  92. 	}, show = function(e, t){
  93. 		
  94. 		/**
  95. 		 * e = modal element (as jQuery object)
  96. 		 * t = triggering element
  97. 		 * 
  98. 		 * o = options
  99. 		 * z = z-index of modal
  100. 		 * v = overlay element (as jQuery object)
  101. 		 * h = hash (for jqModal <= r15 compatibility)
  102. 		 */
  103. 		
  104. 		var o = e.data('jqm'),
  105. 			t = t || window.event,
  106. 			z = (parseInt(e.css('z-index'))),
  107. 			z = (z > 0) ? z : 3000,
  108. 			v = $('<div></div>').addClass(o.overlayClass).css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:o.overlay/100}),
  109. 		
  110. 			// maintain legacy "hash" construct
  111. 			h = {w: e, c: o, o: v, t: t};
  112. 			
  113. 		e.css('z-index',z);
  114.  
  115. 		if(o.ajax){
  116. 			var target = o.target || e,
  117. 				url = o.ajax;
  118. 			
  119. 			target = (typeof target == 'string') ? $(target,e) : $(target);
  120. 			if(url.substr(0,1) == '@') url = $(t).attr(url.substring(1));
  121. 			
  122. 			 // Load the Ajax Content (and once loaded);
  123. 			   // Fire the onLoad callback (if exists),
  124. 			   // Attach closing events to elements inside the modal that match the closingClass,
  125. 			   // and Execute the jqModal default Open Callback
  126. 			target.html(o.ajaxText).load(url,function(){
  127. 				o.onLoad && o.onLoad.call(this,h);
  128. 				open(h);
  129. 			});	
  130. 		}
  131. 		else { open(h); }
  132. 		
  133. 	}, hide = function(e, t){
  134. 		/**
  135. 		 * e = modal element (as jQuery object)
  136. 		 * t = triggering element
  137. 		 * 
  138. 		 * o = options
  139. 		 * h = hash (for jqModal <= r15 compatibility)
  140. 		 */
  141. 		
  142. 		var o = e.data('jqm'),
  143. 			t = t || window.event,
  144. 		
  145. 		// maintain legacy "hash" construct
  146. 		h = {w: e, c: o, o: e.data('jqmv'), t: t};
  147. 		
  148. 		close(h);
  149. 		
  150. 	}, onShow = function(hash){
  151. 		// onShow callback. Responsible for showing a modal and overlay.
  152. 		//  return false to stop opening modal. 
  153. 		
  154. 		// hash object;
  155. 	    //  w: (jQuery object) The modal element
  156. 	    //  c: (object) The modal's options object 
  157. 	    //  o: (jQuery object) The overlay element
  158. 	    //  t: (DOM object) The triggering element
  159. 		
  160. 		// display the overlay (prepend to body) if not disabled
  161. 		if(hash.c.overlay > 0)
  162. 			hash.o.prependTo('body');
  163. 			
  164. 		// make modal visible
  165. 		hash.w.show();
  166. 		
  167. 		// call focusFunc (attempts to focus on first input in modal)
  168. 		$.jqm.focusFunc(hash.w);
  169. 		
  170. 		return true;
  171. 		
  172. 		
  173. 	}, onHide = function(hash){
  174. 		// onHide callback. Responsible for hiding a modal and overlay.
  175. 		//  return false to stop closing modal. 
  176. 		
  177. 		// hash object;
  178. 	    //  w: (jQuery object) The modal element
  179. 	    //  c: (object) The modal's options object 
  180. 	    //  o: (jQuery object) The overlay element
  181. 	    //  t: (DOM object) The triggering element
  182. 		
  183. 		// hide modal and if overlay, remove overlay.
  184. 		hash.w.hide() && hash.o && hash.o.remove();
  185. 		
  186. 		return true;
  187. 		
  188. 		
  189. 	},  addTrigger = function(e, key, trigger){
  190. 		// addTrigger: Adds a jqmShow/jqmHide (key) event click on modal (e)
  191. 		//  to all elements that match trigger string (trigger)
  192. 		
  193. 		var jqm = e.data('jqm');
  194. 		
  195. 		// return false if e is not an initialized modal element
  196. 		if(!e.data('jqm')) return false;
  197. 		
  198. 		return $(trigger).each(function(){
  199. 			this[key] = this[key] || [];
  200. 			
  201. 			// register this modal with this trigger only once
  202. 			if($.inArray(jqm.ID,this[key]) < 0) {
  203. 				this[key].push(jqm.ID);
  204. 				
  205. 				// register trigger click event for this modal
  206. 				$(this).click(function(){
  207. 					var trigger = this;
  208. 					
  209. 					e[key](this);
  210. 					
  211. 					// stop trigger click event from bubbling
  212. 					return false;
  213. 				});
  214. 			}
  215. 			
  216. 		});
  217. 		
  218. 	},  open = function(h){
  219. 		// open: executes the onOpen callback + performs common tasks if successful
  220.  
  221. 		// transform legacy hash into new var shortcuts 
  222. 		 var e = h.w,
  223. 		 	v = h.o,
  224. 		 	o = h.c;	
  225.  
  226. 		// execute onShow callback
  227. 		if(o.onShow(h) !== false){
  228. 			// mark modal as shown
  229. 			e[0]._jqmShown = true;
  230. 			
  231. 			// if modal dialog 
  232. 			//
  233. 			// Bind the Keep Focus Function [F] if no other Modals are open (!A[0]) +
  234. 			// Add this modal to the opened modals stack (A) for nested modal support
  235. 			// 
  236. 			// else, close dialog when overlay is clicked
  237. 			if(o.modal){ !A[0]&&F('bind'); A.push(e); }
  238.             else e.jqmAddClose(v);
  239. 			
  240. 			//  Attach closing events to elements inside the modal that match the closingClass
  241. 			o.closeClass&&e.jqmAddClose($('.' + o.closeClass,e));
  242. 			
  243. 			// IF toTop is true and overlay exists;
  244. 			//  Add placeholder element <span id="jqmP#ID_of_modal"/> before modal to
  245. 			//  remember it's position in the DOM and move it to a child of the body tag (after overlay)
  246. 			o.toTop&&v&&e.before('<span id="jqmP'+o.ID+'"></span>').insertAfter(v);
  247. 			
  248. 			// remember overlay (for closing function)
  249. 			e.data('jqmv',v);
  250. 		}
  251. 		
  252. 		
  253. 	},  close = function(h){
  254. 		// close: executes the onHide callback + performs common tasks if successful
  255.  
  256. 		// transform legacy hash into new var shortcuts 
  257. 		 var e = h.w,
  258. 		 	v = h.o,
  259. 		 	o = h.c;
  260.  
  261. 		// execute onShow callback
  262. 		if(o.onHide(h) !== false){
  263. 			// mark modal as !shown
  264. 			e[0]._jqmShown = false;
  265. 			
  266. 			 // If modal, remove from modal stack.
  267. 			 // If no modals in modal stack, unbind the Keep Focus Function
  268. 			 if(o.modal){A.pop();!A[0]&&F('unbind');}
  269. 			 
  270. 			 // IF toTop was passed and an overlay exists;
  271. 			 //  Move modal back to its "remembered" position.
  272. 			 o.toTop&&v&&$('#jqmP'+o.ID).after(e).remove();
  273. 		}
  274. 		
  275. 		
  276. 	},  F = function(t){
  277. 		// F: The Keep Focus Function (for modal: true dialos)
  278. 		// Binds or Unbinds (t) the Focus Examination Function (X) to keypresses and clicks
  279. 		
  280. 		$(document)[t]("keypress keydown mousedown",X);
  281. 		
  282. 		
  283. 	}, X = function(e){
  284. 		// X: The Focus Examination Function (for modal: true dialogs)
  285.  
  286. 		var modal = $(e.target).data('jqm') || $(e.target).parents('.jqm-init:first').data('jqm'),
  287. 			activeModal = A[A.length-1].data('jqm');
  288. 		
  289. 		// allow bubbling if event target is within active modal dialog
  290. 		if(modal && modal.ID == activeModal.ID) return true; 
  291.  
  292. 		// else, trigger focusFunc (focus on first input element and halt bubbling)
  293. 		return $.jqm.focusFunc(activeModal);
  294. 	}, 
  295. 	
  296. 	I = 0,   // modal ID increment (for nested modals) 
  297. 	A = [];  // array of active modals (used to lock interactivity to appropriate modal)
  298. 	
  299. 	
  300. 	// $.jqm, overridable defaults
  301. 	$.jqm = {
  302. 		/**
  303. 		 *  default options
  304. 		 *    
  305. 		 * (Integer)   overlay      - [0-100] Translucency percentage (opacity) of the body covering overlay. Set to 0 for NO overlay, and up to 100 for a 100% opaque overlay.  
  306. 		 * (String)    overlayClass - Applied to the body covering overlay. Useful for controlling overlay look (tint, background-image, &c) with CSS.
  307. 		 * (String)    closeClass   - Children of the modal element matching `closeClass` will fire the onHide event (to close the modal).
  308. 		 * (Mixed)     trigger      - Matching elements will fire the onShow event (to display the modal). Trigger can be a selector String, a jQuery collection of elements, a DOM element, or a False boolean.
  309. 		 * (String)    ajax         - URL to load content from via an AJAX request. False to disable ajax. If ajax begins with a "@", the URL is extracted from the attribute of the triggering element (e.g. use '@data-url' for; <a href="#" class="jqModal" data-url="modal.html">...)	                
  310. 		 * (Mixed)     target       - Children of the modal element to load the ajax response into. If false, modal content will be overwritten by ajax response. Useful for retaining modal design. 
  311. 		 *                            Target may be a selector string, jQuery collection of elements, or a DOM element -- and MUST exist as a child of the modal element.
  312. 		 * (String)    ajaxText     - Text shown while waiting for ajax return. Replaces HTML content of `target` element.
  313. 		 * (Boolean)   modal        - If true, user interactivity will be locked to the modal window until closed.
  314. 		 * (Boolean)   toTop        - If true, modal will be posistioned as a first child of the BODY element when opened, and its DOM posistion restored when closed. Useful for overcoming z-Index container issues.
  315. 		 * (Function)  onShow       - User defined callback function fired when modal opened.
  316. 		 * (Function)  onHide       - User defined callback function fired when modal closed.
  317. 		 * (Function)  onLoad       - User defined callback function fired when ajax content loads.
  318. 		 */
  319. 		params: {
  320. 			overlay: 50,
  321. 			overlayClass: 'jqmOverlay',
  322. 			closeClass: 'jqmClose',
  323. 			trigger: '.jqModal',
  324. 			ajax: false,
  325. 			target: false,
  326. 			ajaxText: '',
  327. 			modal: false,
  328. 			toTop: false,
  329. 			onShow: onShow,
  330. 			onHide: onHide,
  331. 			onLoad: false
  332. 		},
  333. 		
  334. 		// focusFunc is fired when a modal is shown, or when interaction occurs outside
  335. 		// a modal enabled dialog. Passed the modal element. 
  336. 		focusFunc: function(e) { $(':input:visible:first',e).focus(); return false; }
  337. 	};
  338. 	
  339. })( jQuery );

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址