利用CSS3實現不同交互彈出框



33 129 44



特效描述:利用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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表