弹框初始状态下为隐藏状态(display:none), 为了用户体验, 在用户触发打开弹框时间后, 弹框应该在页面中呈居中显示, 使用下面一段代码可以实现居中效果:
function makeCenter() { $('#choose-box-wrapper').css("display","block"); $('#choose-box-wrapper').css("position","absolute"); $('#choose-box-wrapper').css("top", Math.max(0, (($(window).height() - $('#choose-box-wrapper').outerHeight()) / 2) + $(window).scrollTop()) + "px"); $('#choose-box-wrapper').css("left", Math.max(0, (($(window).width() - $('#choose-box-wrapper').outerWidth()) / 2) + $(window).scrollLeft()) + "px"); }2.2 加载省份列表和学校列表
在***次跳出弹框时, 默认为列表中的***个省份. 加载完这个省份所有的名单后, 给每一项都需要绑定一个click函数, 用户在发生单击后, 更新用户选择省份下的大学列表.
更新完该省的大学列表后, 同样要给每一项都绑定一个click函数, 用户在选择该大学后可以执行相应的操作. (比如给某个文本框填值, 页面重定向etc.)
function initProvince() { //原先的省份列表清空 $('#choose-a-province').html(''); for(i=0;i'+schoolList[i].name+''); } //添加省份列表项的click事件 $('.province-item').bind('click', function(){ var item=$(this); var province = item.attr('province-id'); var choosenItem = item.parent().find('.choosen'); if(choosenItem) $(choosenItem).removeClass('choosen'); item.addClass('choosen'); //更新大学列表 initSchool(province); } ); } function initSchool(provinceID) { //原先的学校列表清空 $('#choose-a-school').html(''); var schools = schoolList[provinceID-1].school; for(i=0;i'+schools[i].name+''); } //添加大学列表项的click事件 $('.school-item').bind('click', function(){ var item=$(this); var school = item.attr('school-id'); //更新选择大学文本框中的值 $('#school-name').val(item.text()); //关闭弹窗 hide(); } ); }2.3 弹出及隐藏窗口
在本例中, 用户点击一个要求输入学校的文本框, 页面跳出弹框. 弹框中含有关闭按钮, 可以关闭弹框.
//弹出窗口 function pop(){ //将窗口居中 makeCenter(); //初始化省份列表 initProvince(); //默认情况下, 给***个省份添加choosen样式 $('[province-id="1"]').addClass('choosen'); //初始化大学列表 initSchool(1); } //隐藏窗口 function hide() { $('#choose-box-wrapper').css("display","none"); }到此，关于“怎么用javascript制作一个选择大学的弹框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
当前文章：怎么用javascript制作一个选择大学的弹框
标题URL：http://bjjierui.cn/article/gihjjc.html
