公司最近做的一個項目需要自定義修改文章，要求點擊某段落后在其下方彈出選擇框，選擇要插入的內容。所以寫了這個東西。比較粗糙，見諒！
直接上代碼了，復制過去，改下路徑就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>