默然simple 2016-10-20 09:30 采纳率: 88.2%
浏览 2685
已采纳

点击图片弹出悬浮的选择框怎么实现,css+JS吗

图片说明
类似这样的,能具体解释下怎么实现吗

  • 写回答

7条回答 默认 最新

  • Go 旅城通票 2016-10-20 10:12
    关注

    浮动层+透明效果而已。。fixed来定位

    
    <!doctype html>
    <style>
    #lightbox{width:100%;height:100%;left:0;top:0;position:fixed;background:#000;filter:alpha(opacity=50);opacity:.5;display:none}
    #layer{background:transparent;position:fixed;display:none;z-index:10;
    /*注意下面2个样式,水平垂直居中用*/
    left:50%;width:200px;margin-left:-100px;
    top:50%;height:300px;margin-top:-150px
    }
    #layer input{width:100%;background:blue;color:#fff;height:50px;line-height:50px;font-size:16px;border:none;margin-top:10px}
    #layer a.close{position:absolute;width:50px;height:50px;right:-100px;top:-50px;background:#f00;line-height:50px;font-size:30px;text-align:center}
    </style>
    <input type="button" onclick="showLayer()" value="showLayer" />
    <div id="layer">
        <a class="close" onclick="showLayer(true)">X</a>
        <input type="button" value="审核1" />
        <input type="button" value="审核2" />
    </div>
    <div id="lightbox"></div>
    <script>
        function showLayer(hide) {
            var l = document.getElementById('layer'), lb = document.getElementById('lightbox');
            l.style.display = lb.style.display =hide?'none': 'block';
        }
    </script>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(6条)

报告相同问题?

悬赏问题

  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 spring后端vue前端
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题