<!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>html5实现手机弹窗留言对话框-webkfa.com</title>
<style>
*{
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;background: url(http://image.kuwo.cn/kdt2014/bg.png) repeat;}
ul,li{list-style:none;}
.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_btn2{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:4% 0 2% 0;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}
.huati_btn{width:175px;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;}
.huati{height:40px;padding-top:9px;border-bottom:1px dashed #cecece}
.text_w{color:#282828;font-size:14px;padding:0 2%;height:28px;}
.input{padding:0 2%;}
.input input{color:#868686;width:96%;padding:0 2%;height:32px;border:1px solid #b6b6b6;border-radius:2px;}
</style>
</head>
<body>
<div class="black_overlay" id="blackoverlayid"></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="text_w">想被怎么称呼呢：</p>
<div class="input">
<input type="text" value="" id="userName" onfocus="if(this.value == def_uname){this.value ='';this.style.color='#313131';}" onblur="if(this.value == ''){this.value =def_uname;this.style.color='#868686';}" maxlength="20">
</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:hidetc();" class="huati_btn2" style="float:left;">取消</a>
<a href="javascript:addmess();" class="huati_btn2" style="float:right;">留言</a>
</div>
</div>
</div>
<script type="text/javascript">
function hidetc(){
var obj1=document.getElementById("blackoverlayid");
obj1.style.display='none';
var obj2=document.getElementById("light");
obj2.style.display='none';
}
function addmess(){
alert("请自己实现");
}
</script>
</body>
</html>
<!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>html5实现手机弹窗留言对话框-webkfa.com</title>
<style>
*{
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;background: url(http://image.kuwo.cn/kdt2014/bg.png) repeat;}
ul,li{list-style:none;}
.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_btn2{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:4% 0 2% 0;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}
.huati_btn{width:175px;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;}
.huati{height:40px;padding-top:9px;border-bottom:1px dashed #cecece}
.text_w{color:#282828;font-size:14px;padding:0 2%;height:28px;}
.input{padding:0 2%;}
.input input{color:#868686;width:96%;padding:0 2%;height:32px;border:1px solid #b6b6b6;border-radius:2px;}
</style>
</head>
<body>
<div class="black_overlay" id="blackoverlayid"></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="text_w">想被怎么称呼呢：</p>
<div class="input">
<input type="text" value="" id="userName" onfocus="if(this.value == def_uname){this.value ='';this.style.color='#313131';}" onblur="if(this.value == ''){this.value =def_uname;this.style.color='#868686';}" maxlength="20">
</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:hidetc();" class="huati_btn2" style="float:left;">取消</a>
<a href="javascript:addmess();" class="huati_btn2" style="float:right;">留言</a>
</div>
</div>
</div>
<script type="text/javascript">
function hidetc(){
var obj1=document.getElementById("blackoverlayid");
obj1.style.display='none';
var obj2=document.getElementById("light");
obj2.style.display='none';
}
function addmess(){
alert("请自己实现");
}
</script>
</body>
</html>