jQuery实现弹出窗口城市选择特效

来源：互联网 2023-03-16 23:55:30 版权归原作者所有，如有侵权，请联系我们

jQuery实现弹出窗口城市选择特效

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

jQuery实现弹出窗口城市选择特效

准备好需要用到的图标。

jQuery实现弹出窗口城市选择特效

书写hmtl代码。

div class="mask">/div>

b class="acity">请选择城市/b>

div id="wrap">

div class="city">

div class="top01-city"> em class="ok">确定/em>b>请选择工作地点（最多五项）/b> /div>

div class="mid01-city">

div class="cityshow" id="show"> i>已选地点:/i>

ul>

/ul>

/div>

ul class="cityul">

li>strong>B/strong>b>北京/b>b>保定/b>/li>

li>strong>C/strong>b>长春/b>b>长沙/b>b>重庆/b>/li>

li>strong>D/strong>b>大连/b>b>东莞/b>/li>

/ul>

/div>

jQuery实现弹出窗口城市选择特效

3相关内容非法爬取自百度经验

书写css代码。

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, img, dl, dt, dd, table, th, td, blockquote, fieldset, div, strong, label, em { margin: 0; padding: 0; border: 0; }

ul, ol, li { list-style: none; }

input, button { margin: 0; font-size: 12px; vertical-align: middle; }

body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #333; margin: 0 auto; }

table { border-collapse: collapse; border-spacing: 0; }

img { display: block; }

a { color: #333; text-decoration: none; }

a:hover { color: #c00; text-decoration: underline; }

.mask { width: 100%; height: 700px; background: #000; opacity: 0.6; top: 0; filter: alpha(opacity=60); left: 0; display: none; position: absolute; z-index: 10; }

.acity { display: block; padding-left: 3px; background: url(../images/selean.gif) no-repeat; width: 83px; height: 30px; text-align: center; line-height: 28px; font-weight: normal; cursor: pointer; display: block; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; margin: 20px auto; }

#wrap { width: 960px; height: 700px; margin: 0 auto; position: relative; z-index: 11; }

.city { width: 600px; height: 320px; z-index: 11; display: none; z-index: 11; background: #fff; border-bottom: 4px solid #ff7400; position: absolute; left: 180px; top: 50px; }

.top01-city { height: 27px; line-height: 22px; width: 100%; background: url(../images/bg01.gif) repeat-x left bottom; float: left; text-align: right; border-bottom: 1px solid #ccc; }

.top01-city b { display: block; float: left; padding-left: 27px; background: url(../images/icon01.gif) no-repeat 5px 4px; color: #fff; }

.top01-city .ok { float: right; cursor: pointer; font-style: normal; padding-right: 10px; color: #fff; }

.mid01-city { padding: 2% 1%; width: 98%; background: url(../images/bg02.gif) repeat-x left top; float: left; }

.cityshow { width: 100%; float: left; background: url(../images/line.gif) repeat-x left bottom; padding-bottom: 6px; margin-bottom: 10px; }

.cityshow i { font-style: normal; font-weight: bold; color: #ff7400; float: left; padding-right: 5px; }

.cityshow ul { float: left; }

.cityshow ul li { float: left; padding-right: 14px; }

.cityshow ul li .check { margin-right: 5px; }

.cityul { width: 100%; float: left; }

.cityul li { width: 320px; float: left; padding-bottom: 7px; }

.cityul li b { padding: 0 6px; cursor: pointer; }

jQuery实现弹出窗口城市选择特效

书写并添加js代码。

script src="js/jquery-1.5.1.min.js">/script>

script>

var cityId = 0;

$(function(){

$('.acity').click(function(){

$('.city').show();

$('.mask').show();

});

$('.cityul b').click(function(){

var test=$(this).html();

if($(this).attr("city") == undefined){ $(this).attr("city", window.cityId );}

var city = $(this).attr("city");

if( $('input[city="' city '"]').size()){

$('input[city="' city '"]').parent().remove();

} else {

var ml=$('.cityshow li').length;

if(ml>4){

alert('最多只能添加5个');

}else{

var test=$(this).html();

$('li class="licity">input name="citychk" type="checkbox" checked="true" city="' city '" class="check">b>' test '/b>/li>').appendTo('.cityshow ul');

}

$('input[name=citychk]').click(function(){

$(this).parent('.licity').remove();

});

$('.ok').click(function(){

var total="";

if($('.cityshow ul li').text()==''){alert('请选择')}else{

$('.cityshow ul li').each(function(){

total = (total.length > 0 ? " " : "" ) $(this).text();

});

$('.acity').text(total);

$('.city').hide();

$('.mask').hide();

}

})

/script>

jQuery实现弹出窗口城市选择特效

代码整体结构。

jQuery实现弹出窗口城市选择特效

查看效果。

jQuery实现弹出窗口城市选择特效

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：JS jQuery怎样获取触发网页滚动条事件下一篇：jQuery仿天空星星飘动效果

jQuery实现弹出窗口城市选择特效

工具/原料

方法/步骤

热门文章

标签列表