怎么用javascript制作一个选择大学的弹框

这篇文章主要介绍“怎么用javascript制作一个选择大学的弹框”，在日常操作中，相信很多人在怎么用javascript制作一个选择大学的弹框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用javascript制作一个选择大学的弹框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联从2013年开始，先为峡江等服务建站，峡江等地企业，进行企业商务咨询服务。为峡江企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

1. 数据

一共包含了全国3049所大学, 从人人网拷贝的 (仅供学习交流, 请勿用于商业项目)。

数据地址:http://files.cnblogs.com/technology/school.js. 这是一个脚本文件, 里含的JSON对象存储了学校的信息, 格式为:

var schoolList=[       {           "id":1, //省份id           "school": [               {                   "id": 1001, //学校id                   "name": "\u6e05\u534e\u5927\u5b66" //学校名称               }               /....               ], //这个省的学校           "name": "\u5317\u4eac"     },       //...   ];

2. 步骤

2.1 弹框的构造及弹出方式

目前弹框分为iframe和div两种形式, 在本例中我选择使用div作为弹框, 弹框的结构如下:

                       选择学校

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"); }

//弹出窗口 function pop(){ //将窗口居中 makeCenter(); //初始化省份列表 initProvince(); //默认情况下, 给***个省份添加choosen样式 $('[province-id="1"]').addClass('choosen'); //初始化大学列表 initSchool(1); } //隐藏窗口 function hide() { $('#choose-box-wrapper').css("display","none"); }

新网创想网站建设，新征程启航

怎么用javascript制作一个选择大学的弹框

其他资讯