利用CSS3实现不同交互弹出框



43 168 57



特效描述:利用CSS3实现 不同交互 弹出框,利用CSS3实现不同交互弹出框

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
<script src="js/cssParser.js"></script>
<script src="js/css-filters-polyfill.js"></script>

3. HTML代码

		<div class="md-modal md-effect-1" id="modal-1">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-2" id="modal-2">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-3" id="modal-3">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-4" id="modal-4">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-5" id="modal-5">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-6" id="modal-6">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-7" id="modal-7">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-8" id="modal-8">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-9" id="modal-9">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-10" id="modal-10">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-11" id="modal-11">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-12" id="modal-12">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-13" id="modal-13">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-14" id="modal-14">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-15" id="modal-15">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-16" id="modal-16">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-17" id="modal-17">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-18" id="modal-18">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-19" id="modal-19">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="md-modal md-effect-20" id="modal-20">
			<div class="md-content">
				<h3>Modal Dialog</h3>
				<div>
					<p>This is a modal window. You can do the following things 
					with it:</p>
					<ul>
						<li><strong>Read:</strong> modal windows will probably 
						tell you something important so don&#39;t forget to read 
						what they say.</li>
						<li><strong>Look:</strong> a modal window enjoys a 
						certain kind of attention; just look at it and 
						appreciate its presence.</li>
						<li><strong>Close:</strong> click on the button below to 
						close the modal.</li>
					</ul>
					<button class="md-close">Close me!</button>
				</div>
			</div>
		</div>
		<div class="container">
			<header>
				<h1>Nifty Modal Window Effects <span>Some inspiration for 
				different modal window appearances</span></h1>
			</header>
			<div class="main clearfix">
				<div class="column">
					<p>There are many possibilities for modal overlays to 
					appear. Here are some modern ways of showing them using CSS 
					transitions and animations.</p>
				</div>
				<div class="column">
					<button class="md-trigger" data-modal="modal-1">Fade in &amp; 
					Scale</button>
					<button class="md-trigger" data-modal="modal-2">Slide in 
					(right)</button>
					<button class="md-trigger" data-modal="modal-3">Slide in 
					(bottom)</button>
					<button class="md-trigger" data-modal="modal-4">Newspaper</button>
					<button class="md-trigger" data-modal="modal-5">Fall</button>
					<button class="md-trigger" data-modal="modal-6">Side Fall</button>
					<button class="md-trigger" data-modal="modal-7">Sticky Up</button>
					<button class="md-trigger" data-modal="modal-8">3D Flip 
					(horizontal)</button>
					<button class="md-trigger" data-modal="modal-9">3D Flip 
					(vertical)</button>
					<button class="md-trigger" data-modal="modal-10">3D Sign</button>
					<button class="md-trigger" data-modal="modal-11">Super 
					Scaled</button>
					<button class="md-trigger" data-modal="modal-12">Just Me</button>
					<button class="md-trigger" data-modal="modal-13">3D Slit</button>
					<button class="md-trigger" data-modal="modal-14">3D Rotate 
					Bottom</button>
					<button class="md-trigger" data-modal="modal-15">3D Rotate 
					In Left</button>
					<button class="md-trigger" data-modal="modal-16">Blur</button>
					<button class="md-trigger md-setperspective" data-modal="modal-17">
					Let me in</button>
					<button class="md-trigger md-setperspective" data-modal="modal-18">
					Make way!</button>
					<button class="md-trigger md-setperspective" data-modal="modal-19">
					Slip from top</button>
				</div>
			</div>
		</div><!-- /container -->
		<div class="md-overlay"></div><!-- the overlay element -->
		<script>
			// this is important for IEs
			var polyfilter_scriptpath = '/js/';
		</script>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 其他 css绘制样式 提示框/弹出层 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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