Programing > easyModal.js

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

ħ

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

ǥ

ˡ

Javascript֤

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

ΤҤʷ

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;
 	}

θƤӽФܥ

HTMLեˡθƤӽФܥ֤롣

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

θƤӽФ

JavascriptǡθƤӽФɤ򵭽Ҥ롣

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

ץ

ץ󤬽¤Ƥޤ

ץλ

ʴǡץǤ롣

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

ץμ

ʥץ󤬤ޤ

  • 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

ޥ

ץ饰򤤤ˡ

⡼򡢥Ǥ褦ˤˤ

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

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

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

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

  ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS
Last-modified: 2017-10-20 () 23:54:55 (583d)