当前位置: 首页 > 编程笔记 >

一个仿糯米弹框效果demo

蒯慈
2023-03-14
本文向大家介绍一个仿糯米弹框效果demo,包括了一个仿糯米弹框效果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>
 类似资料:
  • 本文向大家介绍Android仿小米时钟效果,包括了Android仿小米时钟效果的使用技巧和注意事项,需要的朋友参考一下 我在一个[博客] android高仿小米时钟(使用Camera和Matrix实现3D效果)上面看到了小米时钟实现.特别感兴趣.就认真的看了一遍.并自己敲了一遍.下面说下我自己的理解和我的一些改进的地方效果真的特别棒就发布了自己的时钟应用。 先上图(电脑没有gif截图软件.大家凑合

  • 本文向大家介绍js实现仿Discuz文本框弹出层效果,包括了js实现仿Discuz文本框弹出层效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现仿Discuz文本框弹出层效果。分享给大家供大家参考。具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字、图片、表单无素的DIV层

  • 本文向大家介绍Android ReboundScrollView仿IOS拖拽回弹效果,包括了Android ReboundScrollView仿IOS拖拽回弹效果的使用技巧和注意事项,需要的朋友参考一下 初衷: 其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个。 这里先说下

  • 本文向大家介绍Android仿斗鱼直播的弹幕效果,包括了Android仿斗鱼直播的弹幕效果的使用技巧和注意事项,需要的朋友参考一下 记得之前有位朋友在我的公众号里问过我,像直播的那种弹幕功能该如何实现?如今直播行业确实是非常火爆啊,大大小小的公司都要涉足一下直播的领域,用斗鱼的话来讲,现在就是千播之战。而弹幕则无疑是直播功能当中最为重要的一个功能之一,那么今天,我就带着大家一起来实现一个简单的An

  • 本文向大家介绍基于JavaScript实现弹出框效果,包括了基于JavaScript实现弹出框效果的使用技巧和注意事项,需要的朋友参考一下 弹出框在网站页面中是必不可少的一部分,今天借助呐喊教程平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅!   首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等

  • 本文向大家介绍使用jquery制作弹出框效果,包括了使用jquery制作弹出框效果的使用技巧和注意事项,需要的朋友参考一下 非常不错的国产JS弹出框插件,由前端工程师alien开发,提供多种类型的自定义对话框,使用方法简单,浏览器兼容性好,支持的弹出框模式有: alert:普通提示(警告)对话框 confirm:询问(确认)对话框 message:简单消息对话框(无title、无按钮) ifram