[[Programing]] > easyModal.js

#title("easyModal.jsλȤ - ۤɤ褤ǽΥ⡼饤֥")

Javascript/jQueryΥ⡼륦ɥѥ饤֥õƤ顢easyModal.jsꤴʴäΤǡΥ⡣

#contents

* ħ [#de95c6ee]

- leanModal.js˥󥹥ѥ
- ̤ĥץ(200)
- ɡץ󤬤äƤ
- CSSȤimageեȤ˰¸ʤ
- jQueryץ饰(1.8.0 ʹ)
- MIT饤

* ǥ [#d5c0f91a]

- http://www.catch.jp/program/easyModal.js/

*  [#i6f93ec9]

- ܲ/ޥ˥奢 http://flaviusmatis.github.io/easyModal.js/
- Github http://flaviusmatis.github.io/easyModal.js/


* ˡ [#i1ab0190]

** Javascript֤ [#lcc24d74]

 <script type="text/javascript" src="path_to/jquery.js"></script>
 <script type="text/javascript" src="path_to/jquery.easyModal.js"></script>

** ΤҤʷ [#n7ed985e]

HTMLեˡΤҤʷ򤪤

 	<!-- Modal template -->
 	<div id="modal_alert">
 		<h5>顼</h5>
 		<p>* Hello World. This is easyModal.js *</p>
 	</div>

cssɽˤƤ

  	#modal_alert {
  		position: relative;
  		background-color: #fff;
  		box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
  		display: none;
  		padding: 30px;
  		overflow:auto;
  	}


** θƤӽФܥ [#l22cd31f]

HTMLեˡθƤӽФܥ֤롣

 	<button class="open_alert">򳫤</button>

** θƤӽФ [#v3ef604a]

JavascriptǡθƤӽФɤ򵭽Ҥ롣

 	$(function() {
 		<!-- # Alert -->
 		$("#modal_alert").easyModal();
 		
 		$('.open_alert').click(function(e){
 			$('#modal_alert').trigger('openModal');
 			e.preventDefault();
 		});	
 	});

* ץ [#uf46c8be]

ץ󤬽¤Ƥޤ

** ץλ [#xa15f341]

ʴǡץǤ롣

 $(function() {
 	$(selector).easyModal({
 		top: 100,
 		autoOpen: true,
 		overlayOpacity: 0.3,
 		overlayColor: "#333",
 		overlayClose: false,
 		closeOnEscape: false
 	});
 });

** ץμ [#z3e3935e]

ʥץ󤬤ޤ

- top
-- ⡼륦ɥΥȥåפΥեåȤꡣ
-- ǥե "auto"
- autoOpen
-- true ˤȡΤȥ⡼ưǥץ
-- ǥե false
- overlayOpacity
-- ط(С쥤)Ʃ٤
-- ǥե 0.5
- overlayColor
-- ط(С쥤)ο
-- ǥե "#000"
- overlayClose
-- falseˤȡط(С쥤)Υåǡ⡼Ĥʤ
-- ǥե true
- overlayParent
-- ڥȤ򥻥åȤ
-- ǥե "body"
- closeOnEscape
-- falseˤȡESC򲡤Ȥ⡼Ĥʤ
-- ǥե true
- closeButtonClass
-- ⡼֤줿ĤܥΥ饹
-- ǥե ".close"
- onOpen
-- ⡼뤬˸ƤФ륳Хåؿ
--  the modal window

 $(function() {
 	$(selector).easyModal({
 		overlayClose: false,
 		onOpen: function(myModal){
 			$(myModal).append('Opened!');
 		}
 	});
 });

- onClose
-- ⡼뤬Ĥ˸ƤФ륳Хåؿ
-- : the modal window

 $(function() {
 	$(selector).easyModal({
 		overlay : 0.4,
 		onClose: function(myModal){
 			$(myModal).append('Closed!');
 		}
 	});
 });

- zIndex
-- ⡼z-indexη׻ǸƤФؿ
-- ǥե: ڡ+1ǺǤ⤤z-index֤ޤ
- updateZIndexOnOpen
-- z-indexϡ⡼򳫤Ȥ˷׻٤ΥץfalseˤȡȤ˷׻ƥåȤ롣
-- Wheter the z-index should be calculted, using the zIndex function, before the modal opens. When set to false, the z-index is calculated and set once on initialization.
-- ǥե true
- hasVariableWidth 
-- Υ⡼Ȥ(60%Ȥ) true ˤȡĤǤμ¤֤
-- ǥե false

* ޥ [#d406fd70]

ץ饰򤤤ˡ

** ⡼򡢥Ǥ褦ˤˤ [#h7436a15]

85ܤ$modal.cssפΡ'position': 'fixed',פ

 $modal.css({
   'display': 'none',
   'position': 'fixed',

'position' : 'absolute',פѹ롣Υޤ˺ʤ

 $modal.css({
   'display': 'none',
   'position' : 'absolute',

ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS