Home > Article > Web Front-end > An imitation glutinous rice pop-up effect demo_jquery

An imitation glutinous rice pop-up effect demo_jquery

WBOYOriginal: 2016-05-16 16:41:191281browse

代码如下：

<!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">&#9674;</div> 
<div class="togle">&#9830;</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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js monitors IE Firefox browser close, refresh, rollback, and forward events_javascript skillsNext article：js monitors IE Firefox browser close, refresh, rollback, and forward events_javascript skills

See more

An imitation glutinous rice pop-up effect demo_jquery

Related articles