在文本中的最后一个单词之后显示弹出窗口

Question

背景 ：

Onclick文字，我们显示弹出...。

问题 ：

弹出窗口显示在某个随机位置...。

要求 ：

我想在全文完成后显示弹出...。请以动态方式帮助我.....

这是小提琴： https : //jsfiddle.net/kidsdial1/q1nm3u20/

 var target; var imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers": [{ "x": 0, "height": 450, "layers": [{ "x": 0, "layers": [{ "x": 57, "y": 33, "src": "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf", "type": "text", "size": 67, "text": "First Line", "name": "edit_good" }, { "x": 121, "y": 99, "src": "180ef82d12e3eee668a3f6b51ea444e9_Font972.otf", "type": "text", "size": 67, "text": "Second line", "name": "edit_good_1" } ], }, ], "width": 500, "name": "L1" }] }; $(document).ready(function() { // get the text from json function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), 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'); if (name.indexOf('mask_') !== -1) { var imageUrl1 = imageUrl; } else { var imageUrl1 = ''; } var mask = $(".container").mask({ imageUrl: imageUrl1, maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src, onMaskImageCreate: function(img) { img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); }, id: counter }); table.push(mask); fileup.onchange = function() { let mask2 = table[target]; mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; }; counter++; // get the text } 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 $('.container').append( '<a onclick="document.getElementById(\\'light\\').style.display=\\'block\\';document.getElementById(\\'fade\\').style.display=\\'block\\'" ' + '<div class="textcontainer" contenteditable="true" ' + 'style="' + 'left: ' + layer.x + 'px; ' + 'top: ' + layer.y + 'px; ' + 'font-size: ' + layer.size + 'px; ' + '">' + layer.text + '</div></a>' + '<div id="light" class="white_content"> content <a href="javascript:void(0)" onclick="document.getElementById(\\'light\\').style.display=\\'none\\';document.getElementById(\\'fade\\').style.display=\\'none\\'">Close</a></div> <div>' ); } } // extempl code end // ignore below code (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(); }; }); }; }; }(jQuery)); 

 .temp {} .container { background: gold; position: relative; } .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; } .masked-img { overflow: hidden; position: relative; } .textcontainer{ position:absolute; text-align:center; color:#FFF} .textcontainer:hover { background: red; padding: 1px; border-style: dotted; } 

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

如果您有任何疑问，请告诉我。

提前致谢....

Answer 1

您需要将弹出窗口的位置设置为top = layer.y ，这是clicked链接的顶部偏移量。 left = layer.width + layer.x 。

除了很难阅读的混乱代码（我不会理解）之外，您还要使用相同的ID（在HTML中为NONO）多次附加div。 具体来说，您正在为每个图层添加<div id="light" 。 不允许您在HTML中使用重复的ID（不好的做法），在这种情况下，代码会中断。

所以我在light ID中添加了layer.name。 因此，我们将拥有唯一的ID（只要层具有不同的名称）。 <div id="light'+layer.name+'" 。 还要在使用它的其他任何地方添加它。

然后，在附加代码中，您应该使用layer.y设置弹出窗口的top属性。 然后，您可以使用clicked元素的宽度来设置弹出窗口的left属性。 您不能将其作为内联样式添加到附件中（例如top的情况），因为clicked元素是在与弹出窗口同时添加的，因此如果我们尝试在添加元素的确切时间获得其宽度，则它是不确定的。

无论如何，长话短说top ： layer.y （在内嵌样式弹出的） document.getElementById('light'+layer.name).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'表示追加后的左侧位置。

编辑：添加了在打开一个弹出窗口时关闭另一个弹出窗口的功能

只需隐藏没有打开的ID的white_content 。 添加此线在a标签document.querySelector(\\'.white_content:not(' + lightIdString + ')\\').style.display=\\'none\\'其中

const lightId = 'light' + layer.name const lightIdString = '#' + lightId

您可以尝试仅使用lightId并在querySelector()直接添加#

看到这里jsFiddle

或下面的摘录

 var target; var imageUrl = "https://i.imgur.com/RzEm1WK.png"; let jsonData = { "layers": [{ "x": 0, "height": 450, "layers": [{ "x": 0, "layers": [{ "x": 57, "y": 33, "src": "2ccd95bae3f2a0c8249205ca5dfbed24_Montserrat-Bold.ttf", "type": "text", "size": 67, "text": "First Line", "name": "edit_good" }, { "x": 121, "y": 99, "src": "180ef82d12e3eee668a3f6b51ea444e9_Font972.otf", "type": "text", "size": 67, "text": "Second line", "name": "edit_good_1" } ], }, ], "width": 500, "name": "L1" }] }; $(document).ready(function() { // get the text from json function getAllSrc(layers) { let arr = []; layers.forEach(layer => { if (layer.src) { arr.push({ src: layer.src, x: layer.x, y: layer.y, name: layer.name }); } else if (layer.layers) { let newArr = getAllSrc(layer.layers); if (newArr.length > 0) { newArr.forEach(({ src, x, y, name }) => { arr.push({ src, x: (layer.x + x), y: (layer.y + y), 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'); if (name.indexOf('mask_') !== -1) { var imageUrl1 = imageUrl; } else { var imageUrl1 = ''; } var mask = $(".container").mask({ imageUrl: imageUrl1, maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src, onMaskImageCreate: function(img) { img.css({ "position": "absolute", "left": x + "px", "top": y + "px" }); }, id: counter }); table.push(mask); fileup.onchange = function() { let mask2 = table[target]; mask2.loadImage(URL.createObjectURL(fileup.files[0])); document.getElementById('fileup').value = ""; }; counter++; // get the text } 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="document.getElementById(\\'' + lightId + '\\').style.display=\\'block\\';document.querySelector(\\'.white_content:not(' + lightIdString + ')\\').style.display=\\'none\\';document.getElementById(\\'fade\\').style.display=\\'block\\'" ' + '<div class="textcontainer" 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="document.getElementById(\\'light' + layer.name + '\\').style.display=\\'none\\';document.getElementById(\\'fade\\').style.display=\\'none\\'">Close</a></div> <div>' ); document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px' } } // extempl code end // ignore below code (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(); }; }); }; }; }(jQuery)); 

 .temp {} .container { background: gold; position: relative; } .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; } .masked-img { overflow: hidden; position: relative; } .textcontainer { position: absolute; text-align: center; color: #FFF } .textcontainer:hover { background: red; padding: 1px; border-style: dotted; } 

 <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> 

你的错误Cannot read property 'style' of null",因为你没有与ID元素fade 。您可以排序了这一点。