公司最近做的一个项目需要自定义修改文章，要求点击某段落后在其下方弹出选择框，选择要插入的内容。所以写了这个东西。比较粗糙，见谅！
直接上代码了，复制过去，改下路径就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>