javascript - 大家推荐一下，有这种js弹出框插件吗？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 大家推荐一下，有这种js弹出框插件吗？

ringa_lee 2017-04-10 16:30:15

[JavaScript讨论组]

375

大家推荐一下，有这种js弹出框插件吗？如图所示：

ringa_lee

全部回复(6)

PHPz2017-04-10 16:32:15 6楼

上代码

<!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>
   
    <p 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>
    </p>
</body>
</html>