使用模板标签在“编辑”按钮旁边显示弹出窗口

Question

背景：

1。用户单击遮罩，然后将自己的图像上传到蒙版上。...

2。上传图片后，图片上会显示“编辑文字”。

3。一旦用户单击“编辑文本”，我们将显示一个弹出框。...

4.Popup框显示在某个随机位置。...

下面是编辑文本代码：

代码A ：

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

完整代码：Codepen1和Video1

我认为代码的可读性很差，并使用 template标签将代码更改为以下代码：

代码B ：

<template id='demoTemplate'>
<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>
</template>

<script>
if ($(".masked-img" + newImageLoadedId).length === 1) {
    $($('#demoTemplate').html()).insertAfter(".masked-img" + newImageLoadedId).css({
        "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
        "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px"
    });
} 
</script>

完整代码：Codepen2

当弹出框显示在某个随机位置时，我需要在“编辑”按钮旁边显示弹出框，因此我更改了代码A ，如下所示：

代码C ：

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

完整代码：Codepen3

要求：

现在如何使用模板标记[就像我从代码A转换为代码B一样]转换代码C ？