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

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

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

7条回答 默认 最新

  • 已采纳

    浮动层+透明效果而已。。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>
    
    点赞 评论
  • 「已注销」 2016-10-20 09:36

    最好使用框架实现,比如 bootstrap,挺好用的
    最好不要自己写,比较麻烦,

    点赞 评论
  • blownewbee 2016-10-20 09:37
    点赞 评论
  • 会飞的锅 2016-10-20 09:38

    你的截图效果应该是这样的:
    1、按下按钮,这是点击事件,属于JS
    2、点击事件内的函数会显示一个遮罩层的div,那个透明的。右上角带个按钮。
    3、显示遮罩层上的三个按钮,按钮样式是css,还要设置z-index要比遮罩层高。
    4、按钮的样式都是用css写的,js也可以在某个时候加上某些样式

    点赞 评论
  • 星空下的嗳 2016-10-21 00:51

    写个模态框,上面放你的按钮就可以实现了,具体看业务,思路是这样

    点赞 评论
  • cheeseC 2016-10-21 03:56

    主要代码
    图片说明

    点赞 评论
  • cheeseC 2016-10-21 03:57

    图片说明
    是这种效果吧

    这是css

    .page_bottom{ margin:0; padding:0; background:#FFF; position:relative; } .page_bottom .btn_pic{ width:200px; height:200px; } /*遮罩层*/ .top{ width:100%; height:100%; background:rgba(1,1,1,0.5); position:absolute; top:0; display:none;/*先隐藏遮罩*/ } /*关闭按钮*/ button{ background:#DEDEDE; border:none; outline:none; border-radius: 100%; color:#fff; width:30px; height:30px; font-size:20px; position:fixed; right:0; } .top div{ text-align:center; margin:50px 0; width:100%; height:50px; } .top div img{ width:200px; height:50px; }

    这是jq,引用的js/jquery-1.9.1.min.js网上就有

    $(function(){ /*点击图片按钮*/ $('.btn_pic').click(function(){ /*显示遮罩层*/ $('.top').show(); /*点击关闭按钮*/ $('button').click(function(){ /*隐藏遮罩层*/ $('.top').hide(); }); }); });

    这是主要代码

    X
    点赞 评论

相关推荐 更多相似问题