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

标签 javascript html css

背景:

点击文本，我们显示弹出....

问题:

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

要求:

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

enter image description here

这是 fiddle :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>

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

提前致谢....

最佳答案

您需要将弹出窗口定位为 top = layer.y这是 clicked 的顶部偏移量关联。并拥有left = layer.width + layer.x .

除了极其难以阅读的困惑代码(我不会深入)之外，您多次附加一个具有相同 ID 的 div，这在 HTML 中是 NONO。具体来说，您正在申请 <div id="light"对于每一层。不允许在 HTML 中使用重复的 ID(不良做法)，在这种特定情况下会破坏代码。

所以我将 layer.name 添加到 light ID。所以我们将拥有唯一的 id(只要层具有不同的名称)。 <div id="light'+layer.name+'" .还将它添加到其他使用它的地方。

然后在附加代码中你应该设置top使用 layer.y 的弹出窗口属性.然后你可以使用点击元素的宽度来设置 left弹出窗口的属性。您不能将其作为附加中的内联样式(如 top 的情况)，因为单击的元素与弹出窗口同时附加，因此如果我们尝试在附加的确切时间获取它的宽度，则它是未定义的。

总而言之，长话短说 top : layer.y (在弹出窗口的内联样式中) document.getElementById('light'+layer.name).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'用于附加后的左侧定位。

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

只需隐藏 white_content没有打开的 ID。 我在 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 的元素.你可以解决这个问题。

关于javascript - 在文本中的最后一个单词后显示弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55398316/

上一篇：css - 将 <a> 元素底部对齐到 ionic 柱内

下一篇：javascript - 在 UL 标签中展开和折叠

相关文章：

javascript - FlexImages 移动设备上的对齐网格图像大小

javascript - 如何在 Node js中的异步函数内顺序执行代码

javascript - 不同元素样式的分组变化

HTML:修复屏幕底部的页脚 [使用 Sharepoint Designer 2013]

javascript - 通过原型(prototype)/构造函数从复选框输出值

javascript - 无法使用backbone.js从mongodb数据库中删除记录

javascript - pyscript 中没有名为 'theblockchainapi' 的模块

html - css width 属性为不同的元素提供不同的输出

html - 在页面垂直居中并排对齐 2 个 div

css - 应用过渡和变换的不同方式？

©2024 IT工具网  联系我们