HTML5模拟拨打用户电话界面源码

最新推荐文章于 2021-09-23 17:07:35 发布

yuky1327

最新推荐文章于 2021-09-23 17:07:35 发布

阅读量1k

点赞数

分类专栏： Java 文章标签： javascript 数据库 ViewUI

Java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

[img]http://dl2.iteye.com/upload/attachment/0096/5167/f73984cf-ec6e-3ce9-bac2-1133b00dc633.png[/img]


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
          content="fWidth=device-fWidth, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title>弹出层</title>
<style type="text/css">
 /*弹出框的遮罩层*/
 #mask {
				position: absolute;
				top: 0;
				left: 0;
				/*width: expression(body.scrollWidth);*/
				/*height: expression(body.scrollHeight);*/
				background: #666;
				filter: ALPHA(opacity=100);
				z-index: 1;
				visibility: hidden;
				width: 100%;
				height: 100%;
				opacity: 0.9;
}
/**弹出框样式**/
a {
				color: #000;
				font-size: 16px;
				text-decoration: none;
	}

a:hover {
				color: #900;
				text-decoration: underline;
	}

#MessageBox {
position: absolute;
			  margin: 40px auto 0;
			  width: 95%;
			  visibility: hidden;
			  z-index: 2;
			  filter: dropshadow(color=#666666, offx=3, offy=3, positive=2);
            	top: 30%;
}

.Message-body {
background-color: #FFFFFF;
  vertical-align: middle;
  text-align:center;
  padding: 10px 50px 10px 50px;
}
.Message-body .boda {
  line-height: 1.2;
  margin-top: 6px;
  color:#686868;
  font-weight:bold;
  font-size:20px;
}
.Message-body .telnum {
color:#FF0000;
font-size:22px;
}
.Message-body .msg-line{
text-align:center;
width: 100%;
height: 1px;
background-color: rgb(153,153,153);
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FF0000">
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<p>啊啊啊</p>
<div  onclick="onBtnPhoneClick()" style="width: 695px; line-height: 84px;">拨打电话</div>
<!--弹出框的遮罩层-->
<div id="mask" onClick="javascript:d_y();"></div>
<!--弹出框-->
<div id="MessageBox">
  <div class="Message-body">
  <font class="boda" >拨打</font> <br/>
  <div class="msg-line"></div>
	<font class="telnum" >020-1101-1011</font> 
  </div>
  <div style="height:5px;"></div>
  <div class="Message-body">
   <font class="telnum" >取消</font> 
  </div>
</div>
<a href="javascript:void(0)" onclick="goto_top()">返回页顶</a>
</body>
<script language="javascript">
function onBtnPhoneClick(){
	d_x();
	goto_top();
}

function d_x() {
	mask.style.visibility = 'visible';
	MessageBox.style.visibility = 'visible';
}
function d_y() {
	mask.style.visibility = 'hidden';
	MessageBox.style.visibility = 'hidden';
}

//返回顶部代码
var goto_top_type = -1;
var goto_top_itv = 0;

function goto_top_timer()
{
var y = goto_top_type == 1 ? document.documentElement.scrollTop : document.body.scrollTop;
var moveby = 15;

y -= Math.ceil(y * moveby / 100);
if (y < 0) {
y = 0;
}

if (goto_top_type == 1) {
document.documentElement.scrollTop = y;
}
else {
document.body.scrollTop = y;
}

if (y == 0) {
clearInterval(goto_top_itv);
goto_top_itv = 0;
}
}

function goto_top()
{
if (goto_top_itv == 0) {
if (document.documentElement && document.documentElement.scrollTop) {
goto_top_type = 1;
}
else if (document.body && document.body.scrollTop) {
goto_top_type = 2;
}
else {
goto_top_type = 0;
}

if (goto_top_type > 0) {
goto_top_itv = setInterval('goto_top_timer()', 50);
}
}
}
</script>

</html>