点击识别位置并在该位置下弹出选择框

公司最近做的一个项目需要自定义修改文章，要求点击某段落后在其下方弹出选择框，选择要插入的内容。所以写了这个东西。比较粗糙，见谅！

 

直接上代码了，复制过去，改下路径就ok。global.css是样式清零的，加不加载无所谓

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>div模拟编辑器</title>
        <link rel="stylesheet" href="css/global.css">
        <script src="jquery.min.js"></script>
        <style>
            
            .bg_color1{background-color:#0000FF;}
            .bg_color2{background-color:#00FFCC;}
            .bg_color3{background-color:#555555;}
            .bg_color4{background-color:#996699;}
            
            .chooss_box{margin:10px 0px;position:fixed;z-index:10;right:10px;left:10px;top:0px;display: none;}
            .chooss_box ul{padding-right:10px;padding-top:10px;background-color:rgba(0,0,0,.4);border-radius:4px;}
            .chooss_box li{width:33.3%;padding-left:10px;float: left;padding-bottom:10px;}
            .chooss_box li p{line-height:30px;background-color:#fff;border-radius: 2px;text-align: center;font-size:16px;}
            
            .layer_box{padding:10px;position:fixed;z-index:10;width:100%;left:0px;top:0px;bottom:50px;background-color:rgba(0,0,0,.6);display: none;}
            .layer_box .edit_box{width:100%;background-color:#fff;padding:10px;position:fixed;left:0px;top:50%;margin-top:-40px;}
            .layer_box .edit_box textarea{width:100%;border:1px solid red;resize:none;}
        </style>
    </head>
    <body>
        <div class="txt_show_box">
            <div class="bg_color1">11<br><br><br><br></div>
            <div class="bg_color2">22<br><br><br><br></div>
            <div class="bg_color3">33<br><br><br><br></div>
            <div class="bg_color4">44<br><br><br><br></div>
        </div>
        
        <div class="chooss_box">
            <ul class="clearfix">
                <li><p id="in_txt">插文字</p></li>
                <li><p id="change_txt">改文字</p></li>
                <li><p>插广告</p></li>
                <li><p>插图片</p></li>
                <li><p>删除</p></li>
                <li><p>取消</p></li>
            </ul>
        </div>
        <div class="layer_box">
                <div class="edit_box">
                    <textarea id="edit_txt" rows="5"></textarea>
                </div>
            </div>
        <script>
            $(function(){
                
                //选择框位置控制
                $(".txt_show_box").on("touchstart",function(event){
                    var evDiv = event.target;
                    var evDivTop = evDiv.offsetTop;//活动div的top值
                    var evDivHeight = evDiv.offsetHeight;//活动div的高度值
                    var editTop = parseInt(evDivTop)+parseInt(evDivHeight);//输入框的top值
                    
                    //选择框控制
                    $(".chooss_box").css({
                        'top':editTop+"px"
                    })
                    $(".chooss_box").show();
                })
                
                //控制弹框出现
                $("#in_txt").on("touchstart",function(){
                    $(".layer_box").show();
                })
                
                //点击输入框以外的部分，弹框隐藏
                $(".layer_box").on("touchstart",function(){
                    $(this).hide();
                });
                $(".edit_box").on("touchstart",function(event){
                    event.stopPropagation();//阻止事件向上冒泡
                });
            })
        </script>
        
        
        
        
    </body>
</html>

 

posted @ 2017-05-27 09:44  LIULIULIU666  阅读(1952)  评论(1)  编辑  收藏  举报