html5留言弹框回复静态模板

| 阅读数:--次| 作者:html5,css3
摘要：html5留言弹框回复静态模板
html5代码
运行代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="apple-touch-fullscreen" content="YES" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="format-detection" content="telephone=no"/>
		<title></title>
		<style type="text/css">
			*{
			margin:0;padding:0;
			-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
			-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
			-webkit-tap-highlight-color: rgba(210,210,210,0.35); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
			-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
			}
			body{font-family:"微软雅黑";font-size:12px;}
			ul,li{list-style:none;}
			.ylcon{width:100%;min-width:320px;}
			.tit{height:26px;line-height:26px;padding:0px 15px;position:relative;font-size:15px;color:#aaa;border-bottom:1px solid rgba(0, 0, 0, 0.15);}
			
			.story{border-bottom:1px dashed #cecece;padding:0 15px 3px;position:relative;}
			.story_t{font-size:1.2em;color:rgba(0,0,0,1);padding-top:5px;padding-bottom:2px;}
			.story_m{color:rgba(110,110,110,1);line-height:21px;word-break:break-all;word-wrap:break-word;overflow:hidden;font-size:1.2em;padding:2px 0;margin-bottom:3px;}
			.story_time{color:rgba(154,154,154,1);padding:2px 0;}
			.story_hf{background:rgb(245,245,245);font-size:1.2em;border:1px solid rgba(204,204,204,0.2);border-radius:2px;color:rgba(110,110,110,1);padding:4px;margin-bottom:11px;}
			.opbtn{position:absolute;top: 0;right: 0;}
			.opbtn img{float:left;}
			.opbtn span{float:left;padding:6px;padding-left:0px;color:rgba(141,141,141,1);}
			.wzhan{padding:3px;}
			.hfimg{padding: 3px;padding-right:14px;}
			
			.black_overlay{    
			 display: block;    
			 position: fixed;top: 0%;    
			 left: 0%;    
			 width: 100%;    
			 height: 100%;    
			 background-color: black;    
			 z-index:1001;    
			 -moz-opacity: 0.8;    
			 opacity:.80;    
			 filter: alpha(opacity=80);      
			}    
			.white_content{    
			 display: block;    
			 position: fixed;    
			 top: 15%;  left: 0;    
			 width: 100%;   
			 background-color: white;    
			 z-index:1002;    
			overflow:hidden;
			}
			.tcw{width:100%;min-width:320px;}
			#dituContent textarea{color:#868686;width:92%;padding:2%;height:122px;border:1px solid #b6b6b6;border-radius:2px;line-height:18px;margin:2%;}
			
			.huati_btn{width:30%;height:32px;background:#34a0f0;border-radius:3px;font:14px/32px "微软雅黑";display:block;overflow:hidden;margin:0 auto;text-align:center;color:#fff;text-decoration:none;margin:2% 10%;}
			.im {overflow:hidden;padding-bottom:25px;margin-top:0px}
			.im span{width:33%;float:left;text-align:center; vertical-align:absmiddle}
			.im input{ vertical-align:middle;margin:-3px 5px 0 0}
		</style>
	</head>
	<body>
		<div class="ylcon">
			<p class="tit">
				所有留言
			</p>
			<div id="messDivId">
				<div class="story">
					<div class="opbtn">
						<img src="img/wzhan.png" width="20" height="20" class="wzhan"/>
						<span>5987</span>
						<img src="img/hf.png" width="20" height="20" class="hfimg"/>
					</div>
					<p class="story_t">怜星</p>
					<p class="story_time">2015/07/12 20:48</p>
					<div class="story_m">
						我想问最近最火的tfboys呢他们的八卦呢我想问最近最火的tfboys呢,他们的八卦呢我想问最近最火的tfboys呢？！他们的八卦呢？！
						<p class="story_time"><span class="tagdef" style="color:#34A0F0;"><img src="http://img3.kwcdn.kuwo.cn/star/upload/13/13/1396254325549_.png" width="17">莫粉</span><span class="tagdef" style="color:#FF6E6E;"><img src="http://img1.kwcdn.kuwo.cn/star/upload/11/11/1396254405259_.png" width="17">萱粉</span></p>
					</div>
					<div class="story_hf">
						@剑花烟雨:的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契
						<p class="story_time"><span class="tagdef" style="color:#34A0F0;"><img src="http://img3.kwcdn.kuwo.cn/star/upload/13/13/1396254325549_.png" width="17">莫粉</span><span class="tagdef" style="color:#FF6E6E;"><img src="http://img1.kwcdn.kuwo.cn/star/upload/11/11/1396254405259_.png" width="17">萱粉</span></p>
					</div>
				</div>
				
				<div class="story">
					<div class="opbtn">
						<img src="img/wzhan.png" width="20" height="20" class="wzhan"/>
						<span>5987</span>
						<img src="img/hf.png" width="20" height="20" class="hfimg"/>
					</div>
					<p class="story_t">怜星</p>
					<p class="story_time">2015/07/12 20:48</p>
					<div class="story_m">
						我想问最近最火的tfboys呢他们的八卦呢我想问最近最火的tfboys呢,他们的八卦呢我想问最近最火的tfboys呢？！他们的八卦呢？！
						<p class="story_time"><span class="tagdef" style="color:#34A0F0;"><img src="http://img3.kwcdn.kuwo.cn/star/upload/13/13/1396254325549_.png" width="17">莫粉</span><span class="tagdef" style="color:#FF6E6E;"><img src="http://img1.kwcdn.kuwo.cn/star/upload/11/11/1396254405259_.png" width="17">萱粉</span></p>
					</div>
					<div class="story_hf">
						@剑花烟雨:的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契
						<p class="story_time"><span class="tagdef" style="color:#34A0F0;"><img src="http://img3.kwcdn.kuwo.cn/star/upload/13/13/1396254325549_.png" width="17">莫粉</span><span class="tagdef" style="color:#FF6E6E;"><img src="http://img1.kwcdn.kuwo.cn/star/upload/11/11/1396254405259_.png" width="17">萱粉</span></p>
					</div>
				</div>
				
				<div class="story">
					<div class="opbtn">
						<img src="img/wzhan.png" width="20" height="20" class="wzhan"/>
						<span>5987</span>
						<img src="img/hf.png" width="20" height="20" class="hfimg"/>
					</div>
					<p class="story_t">怜星</p>
					<p class="story_time">2015/07/12 20:48</p>
					<div class="story_m">
						我想问最近最火的tfboys呢他们的八卦呢我想问最近最火的tfboys呢,他们的八卦呢我想问最近最火的tfboys呢？！他们的八卦呢？！
						<p class="story_time"><span class="tagdef" style="color:#34A0F0;"><img src="http://img3.kwcdn.kuwo.cn/star/upload/13/13/1396254325549_.png" width="17">莫粉</span><span class="tagdef" style="color:#FF6E6E;"><img src="http://img1.kwcdn.kuwo.cn/star/upload/11/11/1396254405259_.png" width="17">萱粉</span></p>
					</div>
					<div class="story_hf">
						@剑花烟雨:的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契的是相对无言眼波如流的默契
						<p class="story_time"><span class="tagdef" style="color:#34A0F0;"><img src="http://img3.kwcdn.kuwo.cn/star/upload/13/13/1396254325549_.png" width="17">莫粉</span><span class="tagdef" style="color:#FF6E6E;"><img src="http://img1.kwcdn.kuwo.cn/star/upload/11/11/1396254405259_.png" width="17">萱粉</span></p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="black_overlay"></div>
		<div id="light" class="white_content">
			<div class="tcw" style="" id="dituContent">
				<div>
					<textarea id="userText" onkeyup="ckeyup();" cols="" rows="" class="textarea" onfocus="if(this.value == '最多输入200个字'){this.value ='';this.style.color='#313131';}" onblur="if(this.value == ''){this.value ='最多输入200个字';this.style.color='#868686';}" style="color: rgb(134, 134, 134);">最多输入200个字</textarea>
				</div>
				<p class="im">
	            	<span style="width:50%;color:#34A0F0;"><input name="fsfanName" type="checkbox" value="莫粉">莫粉</span>
	            	<span style="width:50%;color:#FF6E6E;"><input name="fsfanName" type="checkbox" value="萱粉">萱粉</span>
            	</p>
				<div>
					<a href="javascript:addmess();" class="huati_btn" style="float:left;">取消</a>
					<a href="javascript:addmess();" class="huati_btn" style="float:right;">留言</a>
				</div>
			</div>
		</div>
	</body>
</html>
返回顶部

Copyright © 2014 网址:www.webkfa.com

学到老代码浏览 关闭浏览