멋진 대화 상자

<div id="somedialog" class="dialog dialog--close">

		<div class="dialog__overlay"></div>

		<div class="dialog__content">

			<div class="morph-shape">

				<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
					viewBox="0 0 560 280" preserveAspectRatio="none"> <rect x="3"
					y="3" fill="none" width="556" height="276"></rect> </svg>

			</div>

			<div class="dialog-inner">

				<h2>
					<strong>Howdy</strong>, I'm a dialog box
				</h2>

				<div>
					<button class="action" data-dialog-close="">Close</button>
				</div>

			</div>

		</div>

	</div>
	<script src="./Dialog Effects _ Wilma_files/classie.js"></script>
	<script src="./Dialog Effects _ Wilma_files/dialogFx.js"></script>
	<script>
		(function() {

			var dlgtrigger = document.querySelector('[data-dialog]'),

			somedialog = document.getElementById(dlgtrigger
					.getAttribute('data-dialog')),

			dlg = new DialogFx(somedialog);

			dlgtrigger.addEventListener('click', dlg.toggle.bind(dlg));

		})();
	</script>

</pre><p></p><pre name="code" class="javascript"><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> a buttom data-dialog="somedialog"</span>

예:

<a
						class="button button-block button-rounded button-highlight button-large"
						onclick="Grading()" data-dialog="somedialog"> </a>

그리고 몇 개의 파일을 도입하면...음..팝업 상자가 들어와야 할 파일이 좀 많긴 한데...





js 및 css 파일 주소http://www.jq22.com/yanshi3103