默然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 如何在3D高斯飞溅的渲染的场景中获得一个可控的旋转物体
  • ¥88 实在没有想法，需要个思路
  • ¥15 MATLAB报错输入参数太多
  • ¥15 python中合并修改日期相同的CSV文件并按照修改日期的名字命名文件
  • ¥15 有赏，i卡绘世画不出
  • ¥15 如何用stata画出文献中常见的安慰剂检验图
  • ¥15 c语言链表结构体数据插入
  • ¥40 使用MATLAB解答线性代数问题
  • ¥15 COCOS的问题COCOS的问题
  • ¥15 FPGA-SRIO初始化失败