js css3模态对话框特效



99 395 132



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



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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