一个仿糯米弹框效果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 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
JS开发前端团队展示控制器来为成员引流
Aug 14 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
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
wxpython 学习笔记 第一天
2009/02/09 Python
python实现kNN算法
2017/12/20 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
介绍一下Java中的Class类
2015/04/10 面试题
如何在Shell脚本中使用函数
2015/09/06 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
毕业生找工作求职信
2014/08/05 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
导游词之无锡古运河
2019/11/14 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python