單擊關閉按鈕，關閉彈出窗口

Question

背景 ：

1.用戶單擊蒙版並在蒙版上上傳自己的圖像...

2.上傳圖片后，圖片上會顯示“編輯文字”。

3.一旦用戶單擊“編輯文本”，我們將顯示彈出框。

4.在彈出框內，我們顯示文本內容和按鈕關閉

一旦我們點擊“ 關閉 ”，它就會關閉彈出框。

$("<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"
    });

Codepen1

我沒有保留“ content”，而是使用template tag替換了下面代碼中的第二行：

腳本

$("<div id=\'dark" + newImageLoadedId + "\' class=\'dark_content\'>" +  
    $('#demoTemplate').html() +
      "<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"
    });

HTML

<template id='demoTemplate'>
   <span class="pip">      
         <div class="btn-group" >
            content
         </div>                              
   </span>
</template>

問題 ：

現在“關閉”按鈕不可單擊。

Codepen2

代碼段 ：

 // Display pop up next to text function closePopUp(el) { el.style.display = 'none'; openID = null } function openPopUp(el) { ///console.log(" open is called ",id) if (openID != null) { closePopUp(openID) } el.style.display = 'block'; openID = el; } let openID = null; var target; var imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "path" : " newyear collage\\/", "info" : { "author" : "", "keywords" : "", "file" : "newyear collage", "date" : "sRGB", "title" : "", "description" : "Normal", "generator" : "Export Kit v1.2.8" }, "name" : "newyear collage", "layers" : [ { "x" : 0, "height" : 612, "layers" : [ { "x" : 0, "color" : "0xFFFFFF", "height" : 612, "y" : 0, "width" : 612, "shapeType" : "rectangle", "type" : "shape", "name" : "bg_rectangle" }, { "x" : 160, "height" : 296, "layers" : [ { "x" : 0, "height" : 296, "src" : "ax0HVTs.png", "y" : 0, "width" : 429, "type" : "image", "name" : "mask_image_1" }, { "radius" : "26 \\/ 27", "color" : "0xACACAC", "x" : 188, "y" : 122, "height" : 53, "width" : 53, "shapeType" : "ellipse", "type" : "shape", "name" : "useradd_ellipse1" } ], "y" : 291, "width" : 429, "type" : "group", "name" : "user_image_1" }, { "x" : 25, "height" : 324, "layers" : [ { "x" : 0, "height" : 324, "src" : "hEM2kEP.png", "y" : 0, "width" : 471, "type" : "image", "name" : "mask_image_2" }, { "radius" : "26 \\/ 27", "color" : "0xACACAC", "x" : 209, "y" : 136, "height" : 53, "width" : 53, "shapeType" : "ellipse", "type" : "shape", "name" : "useradd_ellipse_2" } ], "y" : 22, "width" : 471, "type" : "group", "name" : "user_image_2" } ], "y" : 0, "width" : 612, "type" : "group", "name" : "newyearcollage08" } ] }; $(document).ready(function() { // below code will upload image onclick mask image $('.container').click(function(e) { // filtering out non-canvas clicks if (e.target.tagName !== 'CANVAS') return; // getting absolute points relative to container const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft; const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop; const $canvasList = $(this).find('canvas'); // moving all canvas parents on the same z-index $canvasList.parent().css({ zIndex: 0 }); $canvasList.filter(function() { // filtering only applicable canvases const bbox = this.getBoundingClientRect(); const canvasTop = bbox.top + window.scrollY; const canvasLeft = bbox.left + window.scrollX; return ( absX >= canvasLeft && absX <= canvasLeft + bbox.width && absY >= canvasTop && absY <= canvasTop + bbox.height) }).each(function() { // checking white in a click position const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft; const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop; const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data; if (pixel[3] === 255) { $(this).parent().css({ zIndex: 2 }) target = this.id; console.log(target); 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 if (name.indexOf('mask_') !== -1) { var imageUrl1 = imageUrl; } else { var imageUrl1 = ''; } //code end var mask = $(".container").mask({ imageUrl: imageUrl1, 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\\'>" + $('#demoTemplate').html() + "<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.... // Remove image $("<br/><span id=\\"" + newImageLoadedId + "\\" class=\\"remove\\">Remove</span>").insertAfter(".masked-img" + newImageLoadedId).css({ "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px", "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2 +25) + "px" }); $(".remove").click(function(event) { const canvasId = "canvas#" + event.currentTarget.id; // Delete the image const ctx = $("canvas")[event.currentTarget.id].getContext("2d"); ctx.fillStyle = "white" ctx.fillRect(0, 0, 500, 500) // Delete the Remove button $(this).next().find('.edit').remove() $(this).remove(); }); // Remove image code end here.... }; counter++; } drawText(data); } json(jsonData); }); // end of document ready const fonts = []; // caching duplicate fonts function drawText(layer) { if (layer.type === 'image') return; if (!layer.type || layer.type === 'group') { return layer.layers.forEach(drawText) } if (layer.type === 'text') { const url = 'http://piccellsapp.com:1337/parse/files/PfAppId/' + layer.src; if (!fonts.includes(url)) { fonts.push(url); $("style").prepend("@font-face {\\n" + "\\tfont-family: \\"" + layer.font + "\\";\\n" + "\\tsrc: url(" + url + ") format('truetype');\\n" + "}"); } // Below is POP UP Code const lightId = 'light' + layer.name const lightIdString = '#' + lightId $('.container').append( '<a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' + '<div class="txtContainer" contenteditable="true" ' + 'style="' + 'left: ' + layer.x + 'px; ' + 'top: ' + layer.y + 'px; ' + 'font-size: ' + layer.size + 'px; ' + '">' + layer.text + '</div></a>' + '<div id="light' + layer.name + '" class="white_content" style="' + 'left: ' + layer.x + 'px; ' + 'top: ' + layer.y + 'px; ' + '"> content <a href="javascript:void(0)" ' + 'onclick="closePopUp(' + lightId + ')">Close</a></div> <div>' ); document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px' // Above is POP UP Code } } // extempl code end // 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.mousePosition = function(event) { return { x: event.pageX || event.offsetX, y: event.pageY || event.offsetY }; } container.selected = function(ev) { var pos = container.mousePosition(ev); var item = $(".masked-img canvas").filter(function() { var offset = $(this).offset() var x = pos.x - offset.left; var y = pos.y - offset.top; var d = this.getContext('2d').getImageData(x, y, 1, 1).data; return d[0] > 0 }); JQmasks.forEach(function(el) { var id = item.length > 0 ? $(item).attr("id") : ""; if (el.id == id) el.item.enable(); else el.item.disable(); }); }; container.enable = function() { draggable = true; $(canvas).attr("active", "true"); div.css({ "z-index": 2 }); } container.disable = function() { draggable = false; $(canvas).attr("active", "false"); div.css({ "z-index": 1 }); } container.onDragStart = function(evt) { if (evt.target.getContext) { var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data; $(canvas).attr("active", "true"); container.selected(evt); prevX = evt.clientX; prevY = evt.clientY; var img = new Image(); evt.originalEvent.dataTransfer.setDragImage(img, 10, 10); evt.originalEvent.dataTransfer.setData('text/plain', 'anything'); } }; container.getImagePosition = function() { return { x: settings.x, y: settings.y, scale: settings.scale }; }; container.onDragOver = function(evt) { if (evt.target.getContext) { var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data; if (pixel[3] === 255) { if (draggable && $(canvas).attr("active") === "true") { var x = settings.x + evt.clientX - prevX; var y = settings.y + evt.clientY - prevY; if (x == settings.x && y == settings.y) return; // position has not changed settings.x += evt.clientX - prevX; settings.y += evt.clientY - prevY; prevX = evt.clientX; prevY = evt.clientY; clearTimeout(timeout); timeout = setTimeout(function() { container.updateStyle(); renderInnerImage(); }, 20); } } else { evt.stopPropagation(); return false; } } }; 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; } .remove { background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; position: absolute; z-index: 3; } .remove:hover { background: white; color: black; } .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; } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto; } .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; } .btn-group { position:relative; left:50px; } 

 <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> <template id='demoTemplate'> <span class="pip"> <div class="btn-group" > content </div> </span> </template> 

Answer 1

常見的陷阱是，不會觸發單擊事件，因為您將其綁定到腳本運行時上不存在的元素，例如，稍后要進行dom操縱。

快速解決方案，將點擊事件從document開始就綁定到某些元素上

例如改變

$(".remove").click(function(event) { ...

至

$(document).on('click', '.remove', function(event){ ...

Answer 2

如果您刪除關閉按鈕類，它的工作原理。 因此，也許在CSS中存在問題。