一个仿糯米弹框效果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 相关文章推荐
jQuery学习3:操作元素属性和特性
Feb 07 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
js编写当天简单日历效果【实现代码】
May 03 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
python关于倒排列的知识点总结
2020/10/13 Python
python爬虫请求头的使用
2020/12/01 Python
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
消费者投诉书范文
2015/07/02 职场文书
2015年度女工工作总结
2015/10/22 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android