JavaScript
nyroModal dialog (modal) - 레이어 팝업
수앙
2011. 9. 9. 00:49
1. 홈페이지
nyroModal v2 :: jQuery Plugin
NyroModal v2 :: jQuery Plugin Edito Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. It's easy to use and easy to design. The big problem I experienced with every plugin I
nyromodal.nyro.dev
2. jQuery 기반 plugin
jQuery 최신 버전인 1.6.3 에서도 동작한다.
<head>
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script> <script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 일반 레이어 -->
<a href="demoSent.php" class="nyroModal">Ajax</a>
<!-- 모달 레이어 -->
<a href="demoSent.php" class="nyroModal" rev="modal">Ajax without closing</a>
<!-- 이미지 레이어 -->
<a href="img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>
<!-- div 태그 레이어 -->
<a href="#test" class="nyroModal">DOM Element (hidden div)</a>
<div id="test" style="display: none; width: 600px;">
<a href="demoSent.php" class="nyroModal">Open a new modal</a><br /> Test
</div>
<!-- Demo에 있는 태그를 넣는다. -->
//////////
<script type="text/javascript">
$(function() {
$('.nyroModal').nyroModal();
});
</script>
</body>
3. 레이어창 닫기 이벤트
$.nmTop().close();
4. 페이지 onload 시 레이어창 오픈
$.nmManual(url, {opt});
끝.