html5弹出对话框制作dialog动画手机弹出框代码



237 946 316



特效描述:html5弹出对话框 dialog动画 手机弹出框代码,动画弹出

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/dialog.css" />
<link rel="stylesheet" type="text/css" href="css/dialog-sandra.css" />

2. 引入JS

<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/dialogFx.js"></script>

3. HTML代码

<div class="content">
	<header class="codrops-header">
		<h1>对话框的效果</h1>
		<div class="button-wrap"><button data-dialog="somedialog" class="trigger">打开对话框</button></div>
	</header>
	<nav id="menu" class="menu">
		<div>
			<h2>Simple</h2>
			<ul>
				<li><a class="current-demo" href="index.html">Sandra</a></li>
				<li><a href="sally.html">Sally</a></li>
			</ul>
			<h2>Body</h2>
			<ul>
				<li><a href="dean.html">Dean</a></li>
				<li><a href="susan.html">Susan</a></li>
			</ul>
		</div>
		<div>
			<h2>Move/Slide</h2>
			<ul>
				<li><a href="cathy.html">Cathy</a></li>
				<li><a href="annie.html">Annie</a></li>
				<li><a href="val.html">Val</a></li>
				<li><a href="ricky.html">Ricky</a></li>
				<li><a href="donna.html">Donna</a></li>
			</ul>
		</div>
		<div>
			<h2>Sticky</h2>
			<ul>
				<li><a href="ken.html">Ken</a></li>
				<li><a href="alex.html">Alex</a></li>
			</ul>
			<h2>Jelly</h2>
			<ul>
				<li><a href="don.html">Don</a></li>
			</ul>
		</div>
		<div>
			<h2>SVG</h2>
			<ul>
				<li><a href="laura.html">Laura</a></li>
				<li><a href="jamie.html">Jamie</a></li>
				<li><a href="henry.html">Henry</a></li>
				<li><a href="jim.html">Jim</a></li>
				<li><a href="wilma.html">Wilma</a></li>
			</ul>
		</div>
	</nav>
	<div id="somedialog" class="dialog">
		<div class="dialog__overlay"></div>
		<div class="dialog__content">
			<h2><strong>Howdy</strong>, I'm a dialog box</h2><div><button class="action" data-dialog-close>Close</button></div>
		</div>
	</div>
</div><!-- /content -->
<script type="text/javascript">
(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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 右键菜单 图片广告 文字提示框 对联广告 提示框/弹出层 layer 叠加浮动层 lightbox Tooltip工具提示框 浮动提示框 html5弹窗动画 悬浮浮动漂浮 弹出层拖动 窗口提示框 浮动提示框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到