Использование тега шаблона для отображения всплывающего окна рядом с кнопкой редактирования

Question

Фон :

1. Пользователь нажимает Маска и загружает собственное изображение на маску ....

2.Onceзагруженное изображение, Редактировать текст отображается на изображении ....

3. Как только пользователь нажимает на Редактировать текст, мы показываем всплывающее окно ....

4. Отображалось всплывающее окнов каком-то случайном месте ....

Ниже Редактировать текстовый код:

Код 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 & Видео1

Мне показалось, что код читается плохо, и изменил код наниже, используя шаблон тега :

Код 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

Требование :

Теперь, как преобразовать код C с помощью тега шаблона [как будто я преобразовал из кода A в код B]?