一个酷炫的对话框

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

然后引入几个文件...恩...一个弹出框需要引入的文件确实有点多了....

<!-- common styles -->


<link rel="stylesheet" href="./Dialog Effects _ Wilma_files/dialog.css">


<!-- individual effect -->


<link rel="stylesheet" href="./Dialog Effects _ Wilma_files/dialog-wilma.css">

<script src="./Dialog Effects _ Wilma_files/modernizr.custom.js"></script>

js和css文件地址http://www.jq22.com/yanshi3103