大家推荐一下,有这种js弹出框插件吗?如图所示:
这还用插件吗,自己写个也不复杂
css写个弹出层,js控制隐藏/显示
这种你自己写了,可以写个开源出来
我们都是自己写,不难啊。。。
上代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css.css">
<style>
.box
{
width:400px;
margin:300px auto 0;
}
#province li,#area li
{
padding:10px;
float:left;
cursor:pointer;
}
#province li:hover
{
background:#eee;
}
#area
{
position:absolute;
display:none;
width:250px;
background:#eee;
}
#area span
{
position:absolute;
top:-10px;
right:-10px;
width:20px;
height:20px;
line-height:16px;
font-size:20px;
border-radius:100px;
text-align:center;
background:#999;
color:#fff;
cursor:pointer;
}
#area span:hover
{
}
</style>
<script>
window.onload=function(){
var province=document.querySelector("#province")
var li_p=province.querySelectorAll("li")
var area=document.querySelector("#area")
var li_a=area.querySelectorAll("li")
var close=area.querySelector("span")
var input=document.querySelector("#input")
var l=li_p.length
var province=""
for(var i=0;i<l;i++){
li_p[i].onclick=function(){
for(var i=0;i<l;i++){
li_p[i].style.background="#fff"
}
this.style.background="#eee"
var x=this.querySelector("p").offsetLeft
var y=this.querySelector("p").offsetTop
area.style.display="block"
area.style.left=(x-10)+"px"
area.style.top=(y+10)+"px"
province=this.innerText
}
}
for(var ii=0,ll=li_a.length;ii<ll;ii++){
li_a[ii].onclick=function(){
var address=province+"/"+this.innerText
input.value=address
}
}
close.onclick=function(){
area.style.display="none"
}
}
</script>
</head>
<body>
<div class="box">
<input type="text" id="input">
<ul id="province">
<li>安徽<p></p></li><li>北京<p></p></li><li>重庆<p></p></li><li>福建<p></p></li>
<li>甘肃<p></p></li><li>广东<p></p></li><li>广西<p></p></li><li>贵州<p></p></li>
<li>海南<p></p></li><li>河北<p></p></li><li>黑龙江<p></p></li><li>河南<p></p></li>
<li>湖北<p></p></li><li>湖南<p></p></li><li>江苏<p></p></li><li>江西<p></p></li>
<li>吉林<p></p></li><li>辽宁<p></p></li><li>内蒙古<p></p></li><li>宁夏<p></p></li>
<li>青海<p></p></li><li>山东<p></p></li><li>上海<p></p></li><li>山西<p></p></li>
<li>陕西<p></p></li><li>四川<p></p></li><li>天津<p></p></li><li>新疆<p></p></li>
<li>西藏<p></p></li><li>云南<p></p></li><li>浙江<p></p></li>
</ul>
<ul id="area">
<li>西北区</li>
<li>冻北区</li>
<li>东南区</li>
<li>西南区</li>
<li>中心区</li>
<span>×</span>
</ul>
</div>
</body>
</html>
有这么厉害吗? 楼上那些把自己写的贡献出来给LZ用下呗