js css3模態對話框特效



76 303 102



特效描述:js css3 模態對話框特效,js css3模態對話框特效

代碼結構

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans" rel="stylesheet">
<link rel="stylesheet" href="css/main.css" media="screen">
<link rel="stylesheet" href="css/foundation.min.css">

2. 引入JS

<script type="text/javascript" src="js/bop-js.js"></script>

3. HTML代碼

<div class="wrap">
  <div class="content">
	<div class="buttons">
	  <div class="full">
		<h2>Material Design</h2>
		<div class="button" id="material-light-button" onclick="materialLight()">
		  Material Light
		</div>
		<div class="button" id="material-dark-button" onclick="materialDark()">
		  Material Dark
		</div>
		<div class="button" id="material-light-anime-button" onclick="materialLightAnime()">
		  Material Light Animated
		</div>
		<div class="button" id="material-dark-anime-button" onclick="materialDarkAnime()">
		  Material Dark Animated
		</div>
	  </div>
	</div>
	<div class="buttons">
	  <div class="full">
		<h2 style="background: #FF80AB;">iOS</h2>
		<div class="button" id="ios-light-button" onclick="iosLight()">
		  iOS Light
		</div>
		<div class="button" id="ios-dark-button" onclick="iosDark()">
		  iOS Dark
		</div>
		<div style="opacity:0.5;" class="button" id="material-light-anime-button">
		  Coming Soon
		</div>
		<div style="opacity:0.5;" class="button" id="material-dark-anime-button">
		  Coming Soon
		</div>
	  </div>
	</div>
	<div class="buttons">
	  <div class="full">
		<h2 style="background: #80D8FF;">Modern</h2>
		<div class="button" id="material-light-button" onclick="modernLight()">
		  Moden Light
		</div>
		<div class="button" id="material-dark-button" onclick="modernDark()">
		  Modern Dark
		</div>
		<div class="button" id="material-light-anime-button" onclick="modernLightAnime()">
		  Modern Light Animated
		</div>
		<div class="button" id="material-dark-anime-button" onclick="modernDarkAnime()">
		  Modern Dark Animated
		</div>
	  </div>
	</div>
  </div>
  <div class="shade" id="shade">
  </div>
  <div class="shade-light" id="shade-light">
  </div>
  <!-- the windows -->
	<div id="material-light">
	<h1>Want to use this?</h1>
	<p>
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="Exit()">EXIT</div>
	</div>
	<div id="material-dark">
	<h1>Want to use this?</h1>
	<p>
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="exitDark()">EXIT</div>
	</div>
	<div id="material-light-anime">
	<h1 id="head-anime">Want to use this?</h1>
	<p id="text-anime">
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="exitLightAnime()">EXIT</div>
	</div>
	<div id="material-dark-anime">
	<h1 id="head-anime-dark">Want to use this?</h1>
	<p id="text-anime-dark">
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="exitDarkAnime()">EXIT</div>
	</div>
	<!-- ios -->
	<div id="ios-light">
	<center><h1>Want to use this?</h1>
	<p>
	  Lorem ipsum dolor sit amet
	</p>
	<br>
	<div class="exit" onclick="iosLightExit()">OK</div>
  </center>
	</div>
	<div id="ios-dark">
	<center><h1>Want to use this?</h1>
	<p>
	  Lorem ipsum dolor sit amet
	</p>
	<br>
	<div class="exit" onclick="iosDarkExit()">OK</div>
  </center>
	</div>
	<div id="modern-light">
	<h1>Want to use this?</h1>
	<p>
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="modernExit()">EXIT</div>
	</div>
	<div id="modern-dark">
	<h1>Want to use this?</h1>
	<p>
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="modernDarkExit()">EXIT</div>
	</div>
	<div id="modern-light-anime">
	<h1 id="modernlight-head">Want to use this?</h1>
	<p id="modernlight-text">
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="modernlightanimatedExit()">EXIT</div>
	</div>
	<div id="modern-dark-anime">
	<h1 id="moderndark-head">Want to use this?</h1>
	<p id="moderndark-text">
	  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<br>
	<div class="exit" onclick="moderndarkanimatedExit()">EXIT</div>
	</div>
  <!-- windows end here -->
<!-- document ends here -->
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 浮動提示框 圖片廣告 文字提示框 提示文字
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

老夫子电子