显示编辑文本旁边的弹出框

Question

背景 ：

1.用户点击Mask并在面具上传他们自己的图像....

2.一旦上传图像，编辑文本显示在图像上....

3.一旦用户点击编辑文本，我们就会显示弹出框....

问题 ：

弹出框显示在一些随机的地方....

要求 ：

弹出框应显示在编辑按钮旁边 ....

如何解决问题 ：

对于弹出框，我们需要使用与编辑按钮相同的位置[左侧和顶部] ....在下面的代码中，我包括编辑按钮的CSS ，但如何使用相同的CSS弹出框？

编辑按钮和弹出代码 ：

if ($(".masked-img" + newImageLoadedId).length === 1) {
    $("<span class=\"pip\">" +
        "<a onclick='document.getElementById(\"dark\").style.display=\"block\";'><span class=\"edit\" >Edit </span></a>" +
        '<div id=\'dark\' class=\'dark_content\'>content <a href=\"javascript:void(0)\" onclick=\"document.getElementById(\'dark\').style.display=\'none\';">Close</a></div> ' +
        "</span>").insertAfter(".masked-img" + newImageLoadedId).css({
        +
        "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
        "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px"
    });
}

请上传图像以掩盖并测试结果....

Codepen： https ：//codepen.io/kidsdial/pen/yrXEGz

小提琴： https ： //jsfiddle.net/kidsdial1/gfam1cr0/1/

视频链接

代码段：

 var target; var imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers" : [ { "x" : 0, "height" : 612, "layers" : [ { "x" : 160, "layers" : [ { "x" : 0, "src" : "ax0HVTs.png", "y" : 0, "height" : 296, "width" : 429, "name" : "L2b-1" } ], "y" : 291, "name" : "user_image_1" }, { "x" : 25, "layers" : [ { "x" : 0, "src" : "hEM2kEP.png", "height" : 324, "width" : 471, "y" : 0, "name" : "L2C-1" } ], "y" :22, "name" : "L2" } ], "y" : 0, "width" : 612, "name" : "L1" } ] }; $(document).ready(function() { // below code will upload image onclick mask image $('.container').click(function(e) { var res = e.target; target = res.id; console.log(target); if (e.target.getContext) { // click only inside Non Transparent part var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data; if (pixel[3] === 255) { setTimeout(() => { $('#fileup').click(); }, 20); } } }); // Below code will fetch mask images from json file function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, height: layer.height, width: layer.width, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, height, width, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), height, width, name: (name) }); }); } } }); return arr; } function json(data) { var width = 0; var height = 0; let arr = getAllSrc(data.layers); let layer1 = data.layers; width = layer1[0].width; height = layer1[0].height; let counter = 0; let table = []; for (let { src, x, y, name } of arr) { $(".container").css('width', width + "px").css('height', height + "px").addClass('temp'); //Get Height and width of mask image [ edit button ] var ImagePosition = arr; //code end // Display icon only for mask images //code end var mask = $(".container").mask({ imageUrl: imageUrl, maskImageUrl: 'https://i.imgur.com/' + src, onMaskImageCreate: function(img) { // Mask image positions img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); // end }, id: counter }); table.push(mask); fileup.onchange = function() { let mask2 = table[target]; const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; // Edit image if ($(".masked-img" + newImageLoadedId).length === 1) { $("<span class=\\"pip\\">" + "<a onclick='document.getElementById(\\"dark\\").style.display=\\"block\\";'><span class=\\"edit\\" >Edit </span></a>" + '<div id=\\'dark\\' class=\\'dark_content\\'>content <a href=\\"javascript:void(0)\\" onclick=\\"document.getElementById(\\'dark\\').style.display=\\'none\\';">Close</a></div> ' + "</span>").insertAfter(".masked-img" + newImageLoadedId).css({ "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px", "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px" }); } // Edit code end here.... }; counter++; } } json(jsonData); }); // end of document ready // jq plugin (function($) { var JQmasks = []; $.fn.mask = function(options) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. maskImageUrl: undefined, imageUrl: undefined, scale: 1, id: new Date().getUTCMilliseconds().toString(), x: 0, // image start position y: 0, // image start position onMaskImageCreate: function(div) {}, }, options); var container = $(this); let prevX = 0, prevY = 0, draggable = false, img, canvas, context, image, timeout, initImage = false, startX = settings.x, startY = settings.y, div; container.updateStyle = function() { return new Promise((resolve, reject) => { context.beginPath(); context.globalCompositeOperation = "source-over"; image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); image.src = settings.maskImageUrl; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); div.css({ "width": image.width, "height": image.height }); resolve(); }; }); }; function renderInnerImage() { img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = settings.imageUrl; img.onload = function() { settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x; settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y; context.globalCompositeOperation = 'source-atop'; context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale); initImage = false; }; } // change the draggable image container.loadImage = function(imageUrl) { console.log("load"); //if (img) // img.remove(); // reset the code. settings.y = startY; settings.x = startX; prevX = prevY = 0; settings.imageUrl = imageUrl; initImage = true; container.updateStyle().then(renderInnerImage); // sirpepole Add this return settings.id; }; // change the masked Image container.loadMaskImage = function(imageUrl, from) { canvas = document.createElement("canvas"); context = canvas.getContext('2d'); canvas.setAttribute("draggable", "true"); canvas.setAttribute("id", settings.id); settings.maskImageUrl = imageUrl; div = $("<div/>", { "class": "masked-img" }).append(canvas); // div.find("canvas").on('touchstart mousedown', function(event) div.find("canvas").on('dragstart', function(event) { if (event.handled === false) return; event.handled = true; container.onDragStart(event); }); div.find("canvas").on('touchend mouseup', function(event) { if (event.handled === false) return; event.handled = true; container.selected(event); }); div.find("canvas").bind("dragover", container.onDragOver); container.append(div); if (settings.onMaskImageCreate) settings.onMaskImageCreate(div); container.loadImage(settings.imageUrl); }; container.loadMaskImage(settings.maskImageUrl); JQmasks.push({ item: container, id: settings.id }) // Edit image div.addClass('masked-img' + settings.id); // code end return container; }; }(jQuery)); 

 .container { background: gold; position: relative; } .container img { position: absolute; top: 0; bottom: 250px; left: 0; right: 0; margin: auto; z-index: 999; } .masked-img { overflow: hidden; position: relative; } .txtContainer { position: absolute; text-align: center; color: #FFF } .txtContainer:hover { background: red; padding: 1px; border-style: dotted; } .pip { display: inline-block; margin: 0; position: absolute; } .edit { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; position: absolute; z-index: 3; } .edit:hover { background: white; color: black; position: absolute; z-index: 3; } .dark_content { display: none; position: relative; top: 25%; left: 25%; width: 350px; height: 350px; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="fileup" name="fileup" type="file" style="display:none" > <div class="container"> </div> 

Answer 1

我只是通过几个脚本更改来更新代码。 试试这个我希望它会帮助你。 谢谢

 var target; var imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers" : [ { "x" : 0, "height" : 612, "layers" : [ { "x" : 160, "layers" : [ { "x" : 0, "src" : "ax0HVTs.png", "y" : 0, "height" : 296, "width" : 429, "name" : "L2b-1" } ], "y" : 291, "name" : "user_image_1" }, { "x" : 25, "layers" : [ { "x" : 0, "src" : "hEM2kEP.png", "height" : 324, "width" : 471, "y" : 0, "name" : "L2C-1" } ], "y" :22, "name" : "L2" } ], "y" : 0, "width" : 612, "name" : "L1" } ] }; $(document).ready(function() { // below code will upload image onclick mask image $('.container').click(function(e) { var res = e.target; target = res.id; console.log(target); if (e.target.getContext) { // click only inside Non Transparent part var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data; if (pixel[3] === 255) { setTimeout(() => { $('#fileup').click(); }, 20); } } }); // Below code will fetch mask images from json file function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, height: layer.height, width: layer.width, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, height, width, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), height, width, name: (name) }); }); } } }); return arr; } function json(data) { var width = 0; var height = 0; let arr = getAllSrc(data.layers); let layer1 = data.layers; width = layer1[0].width; height = layer1[0].height; let counter = 0; let table = []; for (let { src, x, y, name } of arr) { $(".container").css('width', width + "px").css('height', height + "px").addClass('temp'); //Get Height and width of mask image [ edit button ] var ImagePosition = arr; //code end // Display icon only for mask images //code end var mask = $(".container").mask({ imageUrl: imageUrl, maskImageUrl: 'https://i.imgur.com/' + src, onMaskImageCreate: function(img) { // Mask image positions img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); // end }, id: counter }); table.push(mask); fileup.onchange = function() { let mask2 = table[target]; const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; // Edit image if ($(".masked-img" + newImageLoadedId).length === 1) { $("<span class=\\"pip pip" + newImageLoadedId + "\\">" + "<a onclick='document.getElementById(\\"dark" + newImageLoadedId + "\\").style.display=\\"block\\";'><span class=\\"edit edit" + newImageLoadedId + "\\" >Edit </span></a>" + "</span>").insertAfter(".masked-img" + newImageLoadedId).css({ "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px", "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px" }); $("<div id=\\'dark" + newImageLoadedId + "\\' class=\\'dark_content\\'>content" + "<a href=\\"javascript:void(0)\\" onclick=\\"document.getElementById(\\'dark" + newImageLoadedId + "\\').style.display=\\'none\\'\\">Close</a>" + "</div>").appendTo(".pip" + newImageLoadedId).css({ "left": $('.edit' + newImageLoadedId).width() + 2 + "px", "top": "0px" }); } // Edit code end here.... }; counter++; } } json(jsonData); }); // end of document ready // jq plugin (function($) { var JQmasks = []; $.fn.mask = function(options) { // This is the easiest way to have default options. var settings = $.extend({ // These are the defaults. maskImageUrl: undefined, imageUrl: undefined, scale: 1, id: new Date().getUTCMilliseconds().toString(), x: 0, // image start position y: 0, // image start position onMaskImageCreate: function(div) {}, }, options); var container = $(this); let prevX = 0, prevY = 0, draggable = false, img, canvas, context, image, timeout, initImage = false, startX = settings.x, startY = settings.y, div; container.updateStyle = function() { return new Promise((resolve, reject) => { context.beginPath(); context.globalCompositeOperation = "source-over"; image = new Image(); image.setAttribute('crossOrigin', 'anonymous'); image.src = settings.maskImageUrl; image.onload = function() { canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); div.css({ "width": image.width, "height": image.height }); resolve(); }; }); }; function renderInnerImage() { img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = settings.imageUrl; img.onload = function() { settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x; settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y; context.globalCompositeOperation = 'source-atop'; context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale); initImage = false; }; } // change the draggable image container.loadImage = function(imageUrl) { console.log("load"); //if (img) // img.remove(); // reset the code. settings.y = startY; settings.x = startX; prevX = prevY = 0; settings.imageUrl = imageUrl; initImage = true; container.updateStyle().then(renderInnerImage); // sirpepole Add this return settings.id; }; // change the masked Image container.loadMaskImage = function(imageUrl, from) { canvas = document.createElement("canvas"); context = canvas.getContext('2d'); canvas.setAttribute("draggable", "true"); canvas.setAttribute("id", settings.id); settings.maskImageUrl = imageUrl; div = $("<div/>", { "class": "masked-img" }).append(canvas); // div.find("canvas").on('touchstart mousedown', function(event) div.find("canvas").on('dragstart', function(event) { if (event.handled === false) return; event.handled = true; container.onDragStart(event); }); div.find("canvas").on('touchend mouseup', function(event) { if (event.handled === false) return; event.handled = true; container.selected(event); }); div.find("canvas").bind("dragover", container.onDragOver); container.append(div); if (settings.onMaskImageCreate) settings.onMaskImageCreate(div); container.loadImage(settings.imageUrl); }; container.loadMaskImage(settings.maskImageUrl); JQmasks.push({ item: container, id: settings.id }) // Edit image div.addClass('masked-img' + settings.id); // code end return container; }; }(jQuery)); 

 .container { background: gold; position: relative; } .container img { position: absolute; top: 0; bottom: 250px; left: 0; right: 0; margin: auto; z-index: 999; } .masked-img { overflow: hidden; position: relative; } .txtContainer { position: absolute; text-align: center; color: #FFF } .txtContainer:hover { background: red; padding: 1px; border-style: dotted; } .pip { display: inline-block; margin: 0; position: absolute; } .edit { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; position: absolute; z-index: 3; } .edit:hover { background: white; color: black; position: absolute; z-index: 3; } .dark_content { display: none; position: relative; top: 25%; left: 25%; width: 350px; height: 350px; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="fileup" name="fileup" type="file" style="display:none" > <div class="container"> </div>