一个仿糯米弹框效果demo


Posted in Javascript onJuly 22, 2014

一个仿糯米弹框效果demo

代码如下:

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Tabs</title> 
<style type="text/css"> 
/* Remove margin padding */ 
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin:0; padding:0; } 

/* Default Font */ 
body,button,input,select,textarea { font:12px/1.5 \5b8b\4f53,arial,sans-serif; } 
h1,h2,h3,h4,h5,h6 { font-size:100%; } 
address,cite,dfn,em,var { font-style:normal; } 
code,kbd,pre,samp { font-family:courier new,courier,monospace; } 
small { font-size:12px; } 
ul,ol { list-style:none; } 
a { text-decoration:none; } 
a:hover { text-decoration:underline; } 
sup { vertical-align:text-top; } 
sub { vertical-align:text-bottom; } 
legend { color:#000; } 
fieldset,img { border:0; } 
button,input,select,textarea{ font-size:100%; } 
table { border-collapse:collapse; border-spacing:0; } 

.col-main{ float:left; width:100%; min-height:1px; } 
.col-sub,.col-extra { float:left; } 
.layout:after,.main-wrap:after,.col-sub:after,.col-extra:after { content:'\20'; display:block; height:0; clear:both; } 
.layout,.main-wrap,.col-sub,.col-extra { zoom:1; } 

/* Common Features */ 
.hidden { display:none; } 
.invisible { visibility:hidden; } 

/* Remove Float */ 
.clear { display:block; height:0; overflow:hidden; clear:both; } 
.clearfix:after { content:'\20'; display:block; height:0; clear:both; } 
.clearfix { *zoom:1; } 

/* For non ie browsers also display the vertical scroll bar by default, to prevent the flicker caused by the scroll bar */ 
html { overflow-y:scroll; } 

/* Default link styles */ 
a:link {color: #003399; } 
a:visited {color: #123689;} 
a:hover {color: #FF6600;} 
</style> 
</head> 
<body> 

<style type="text/css"> 
body { height:1000px; } 
.dialog-wrap, .dialog { display:none; } 
.dialog-wrap { position:absolute; top:0px; left:0px; width:100%; z-index:99; background:#000; } 
.dialog { 
border:10px; 
background:url(images/welcome91981.png) no-repeat; 
z-index:199; 
position:fixed; 
_position:absolute; 
width:451px; 
height:313px; 
top:50%; 
left:50%; 
margin:-156px 0px 0px -225px; 
border-radius:10px;text-align:left; 
} 
.dialog .city-box { position:relative; width:100%; height:100% } 
.dialog .close { position:absolute; width:18px; height:18px; top:16px; right:16px; z-index:205; } 
.dialog .close a { display:block; width:100%; height:100%; } 

.cityBox{position:absolute;cursor:pointer;top:143px;left:212px;height:30px;line-height:30px;font-size:16px;color:#f4396d;padding:0 30px 0 10px;display:inline-block; z-index:200; } 
.cityBox span{width:90px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block} 
.hotCityBox{position:absolute;width:272px;top:160px;left:170px;display:none;z-index:200;} 
.togle{color:#fff;position:absolute;left:50%;font-size:28px;z-index:200;} 
.togleborder{position:absolute;left:50%;font-size:28px;color:#ddd;top:3px;z-index:200;} 
.hotCityList{background:#fff;border-radius:5px;box-shadow:1px 1px 1px #333;top:22px;position:absolute;width:270px;border:1px solid #ddd; z-index:202;} 
.hotCityList p{padding:5px 0} 
.hotCityList p a{padding:0 8px;height:22px;line-height:22px;color:#333;font-size:14px;margin:3px 5px;text-align:center;display:inline-block;float:left} 
.hotCityList p a:hover{background:#f55583;color:#fff;text-decoration:none} 
.moreCity{border-top:1px solid #c6c6c6;height:30px;line-height:30px;text-align:right;} 
.moreCity a{color:#f55583;font-size:14px;margin-right:10px} 
.cityConfirm{position:absolute;cursor:pointer;width:168px;height:48px;left:137px;bottom:22px;} 
.cityConfirm a{width:168px;height:48px;display:block} 
.evet { display:none; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:198; } 
</style> 


<div class="dialog-wrap"></div> 
<div class="dialog"> 
<div class="city-box"> 
<div class="close"><a title="关闭" href="javascript:close_dialog();" rel="external nofollow" ></a></div> 
<div class="cityBox"><span>北京</span></div> 
<div class="hotCityBox"> 
<div class="togleborder">◊</div> 
<div class="togle">♦</div> 
<div class="hotCityList"> 
<p class="clearfix"> 
<a href="">北京</a> 
<a href="">上海</a> 
<a href="">天津</a> 
<a href="">杭州</a> 
<a href="">西安</a> 
<a href="">成都</a> 
<a href="">郑州</a> 
<a href="">厦门</a> 
<a href="">青岛</a> 
<a href="">深圳</a> 
<a href="">太原</a> 
<a href="">重庆</a> 
<a href="">武汉</a> 
<a href="">南京</a> 
<a href="">广州</a> 
<a href="">沈阳</a> 
<a href="">济南</a> 
<a href="">哈尔滨</a> 
</p> 
<div class="moreCity"><a href="">更多城市>></a></div> 
</div> 
</div> 
<div class="cityConfirm"><a title="开始团购" href=""></a></div> 
<div class="evet"></div> 
</div> 
</div> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
function dialog(){ 
var h = $('body').height(); 
$('.dialog-wrap').css({'height':h,'opacity':0.5,'display':'block'}); 
$('.dialog').show(); 
} 
function close_dialog(){ 
$('.dialog, .dialog-wrap').hide(); 
} 
$('.cityBox').click(function(){ 
$('.hotCityBox, .evet').show(); 
}); 

$('.evet, .dialog-wrap').click(function(){ 
$('.hotCityBox, .evet').hide(); 
$('.evet').hide(); 
}); 


//dialog(); 
</script> 

<p onClick="dialog()" style="cursor:pointer">点击这里看效果</p> 
<br> 
我是文字我是文字文字我字我是文字我是文字 
</body> 
</html>
Javascript 相关文章推荐
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
JavaScript数字和字符串转换示例
Mar 26 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
setTimeout时间设置为0详细解析
Mar 13 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 #Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 #Javascript
jquery中的常用事件bind、hover、toggle等示例介绍
Jul 21 #Javascript
关于jQuery判断元素是否存在的问题示例探讨
Jul 21 #Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 #Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 #Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 #Javascript
You might like
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
JS 实现百度搜索功能
2018/02/01 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
python利用paramiko连接远程服务器执行命令的方法
2017/10/16 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Django分页功能的实现代码详解
2019/07/29 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
python初步实现word2vec操作
2020/06/09 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
计算机专业学生的自我评价
2013/12/15 职场文书
高中生期末评语大全
2014/01/28 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
一年级学生评语
2014/04/23 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL