<!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>
- 大小: 23.2 KB
分享到:
相关推荐
html5实现的仿网页版微信聊天界面效果源码
精美html5登陆界面源码,开源源码,可随意修改,动态界面,很漂亮哦~~~
漂亮的登陆界面html源码
本压缩包中包含选课管理系统的用户界面源码(近3000行),数据库文件(直接附加到数据库中即可),操作报告(需求分析、ER图、界面操作详解等共51页)
3个很精美的登陆界面,全都是用HTML5+CSS3开发的,网下载分享一下
漂亮 后台 登陆界面 管理界面 HTML源码 17种非常漂亮后台登陆界面和管理界面HTML源码,整合网上所有经典,框架,不下后悔终生! 有成套的登陆页面,框架页面,漂亮图片,经典框架
电话拨打界面的简单小程序源码,
Android 模拟数字拨号界面及打电话监听功能,将创建一个数字按钮的ID数组,定义OnClickListener为View的内部接口,负责监听鼠标点击事件,为拨号按钮添加监听器,获取输入的电话号码,根据获取的电话号码创建Intent...
20种大气漂亮的后台登陆界面HTML源码
HTML5手机微信聊天界面源码 源码描述: 一、源码特点 1、该源码为HTML5手机微信聊天界面源码,模拟微信聊天界面代码,自动回复。非常适合学习以及二次开发,欢迎大家来下载哦! 二、菜单功能 1、输入、发送、回复...
《HTML5触摸界面设计与开发》专注于触摸界面的开发,内容的结构和优化网站的思路大概一致。上半部分涵盖了能使各类网站,特别是移动网站变快的基本概念。第2章和第3章告诉你如何创建一个简单的网站,并能快速加载。...
Android 登录界面Demo源码
PyQt5系列教程(二)利用QtDesigner设计UI界面源码包,博文地址http://blog.csdn.net/djstavaV/article/details/50282527
C#winform界面特效设计源码,C#winform界面特效设计源码
QQ界面源码实现 自绘控件 换肤 QQ界面 界面换肤 美化 异形窗口 vista 样式 透明窗体 自绘控件 vc vb delphi 编程 源码 代码 例子 磨沙 半透明 开发包 免费 破解 button dialog frame XP 下载 自绘按钮 菜单 标题栏 ...
在网上收集的5个系统登陆界面资源,html源码
自己精心收集漂亮的后台登陆界面管理页面源码html+js,可以结合到ASP.NET(C#),asp,PHP,JSP语言,编写后台功能源码。界面主要包括登陆和管理界面。
著名的界面源码,使用MFC,demo中实现了很多著名的界面,如VC2003、OutLook、Office、PowerPoint等的界面,是学习VC++进行界面开发的好资料,欢迎下载
模拟手机QQ登录和主界面显示;主要包含手机QQ登录界面的设计、Intent的显式跳转和隐式跳转、EditText点击小图标清除输入框内容、EditText密码输入框中密码可见与不可见的切换、使用Fragment实现底部导航栏切换界面、...