一个仿糯米弹框效果demo

时间：2021-05-25

代码如下：

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tabs</title> <style type="text/css"> 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; } 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; } .hidden { display:none; } .invisible { visibility:hidden; } .clear { display:block; height:0; overflow:hidden; clear:both; } .clearfix:after { content:'\20'; display:block; height:0; clear:both; } .clearfix { *zoom:1; } html { overflow-y:scroll; } 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>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章