工作中碰到一个问题，一个页面中碰到多个地方需要弹窗数据。
网上找了一圈，没有找到合适的，所以自己写了一个。
兼容IE7+，chrome。其它未测试。
需求：点击任意的输入框（也可其它元素，代码中有注释），在输入框下，出现弹窗。出现我需要的数据
效果：
窗口1
窗口2
代码如下：
#on_select{ visibility:hidden;/*初始隐藏*/ width: 350px; height: 280px; position: absolute; z-index: 200; background-color: white; color: black; border: 1px solid #2b8fce; top:0px; left: 0px;}#on_select ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: 100%; /* 宽度根据元素内容调整 */}#on_select ul li{ float:left; /* 向左漂移，将竖排变为横排 */ cursor: pointer;}#div_ul1{background-color: #2b8fce;height: 30px;}#div_ul1 li{ height: 25px; padding-top: 5px; width: 20%; color:#e6f9ff;}#div_ul2 li{ width: 100px; font-size: 12px; color: #666; height: 25px; padding-left:10px; text-align: left;} //此段代码，必须写在body标签中
$("#mainMine").click(function(){/* 设置需要弹窗的输入框，当然可以选其它你需要作为弹窗点的元素 */ changeValue(document.getElementById("mainMine")); }); $("#otherMainMine").click(function(){/* 设置第二个弹窗点 */ changeValue(document.getElementById("otherMainMine")); }); /* 多个地方需要，如上，多设置几个 */ function changeValue(vid){//调用此函数，出现弹窗 ctclick=vid;changeRect(); } function changeRect(){ //设置选择框的位置和数据 var d=document.getElementById("li1");//获取第一个类别 changeul2(d);//设置默认页面 $("#on_select").css("visibility","visible");//选择框设置为显示 $("#on_select").css("top",$(ctclick).offset().top+$(ctclick).height()); /*$(ctclick).offset().top获取需要弹窗元素距离最外层父元素顶部的绝对距离*/ $("#on_select").css("left",$(ctclick).offset().left);
/*$(ctclick).offset().left获取需要弹窗元素距离最外层父元素左边的绝对距离*/
}; /*到此实现弹窗*/ $("#on_select").mouseleave(function(){//鼠标离开弹窗效果 $("#on_select").css("visibility","hidden"); }); /* 改变div_ul2里面的值 */ function changeul2(u){ ctpage=1;//设置初始第一页 $("#div_ul1").children().css("background-color", "transparent").css("color","#e6f9ff");//设置所以选择项背景为透明 $(u).css("background-color","#66c8e8").css("color","white").css("font-weight","bold");//设置当前选择项背景颜色 $.ajax({ url:"getCatalog.action?CatalogId="+u.value, async:false, success:function(data){ s=data.split(",");//解析数据 allpage=parseInt((s.length-1)/size+1);//设置总页数 $("#div_ul2").empty(); for(var i=(ctpage-1)*size;i "+s[i]+""); } $("#div_ul2").append(" "); } }); } //分页显示 function changepage(page){ var sn=page*size;//当前页显示数组中的哪些数据 if(page==allpage && (s.length-(page-1)*size) "+s[i]+""); } if(page==1){ $("#div_ul2").append(" "); }else if(page==allpage){ //alert(page==allpage); $("#div_ul2").append(" "); }else { $("#div_ul2").append(" "); } } function changeMM(ipt){//设置输入框里面的值 $(ctclick).empty();//清空数据 $(ctclick).val(ipt.innerText);//重填数据 if(ctclick!=document.getElementById("mainMine")){ $("#on_select").css("visibility","hidden"); return ; } 版权声明：本文为博主原创文章，未经博主允许不得转载。