Question

背景：

页面中有很多行，一旦单击每行，我们就会显示弹出窗口。...

要求：

简短：打开一个弹出窗口时，关闭另一个弹出窗口

Long：当我们单击 1st 行时，然后显示1st弹出窗口，现在，当我们单击 2nd或3rd或任何其他行时，它应该关闭第一个弹出窗口并显示其他弹出窗口 ....

如果我们只有两行，如Codepen1，这很好用，但是如果我们有多于两行，则它不会像Codepen2那样关闭其他弹出窗口。...

我尝试了以下代码：

document.querySelector(\'.white_content:not(' + lightIdString + ')\').style.display=\'none\'

代码段：

var target;
var imageUrl = "https://i.imgur.com/RzEm1WK.png";

 let jsonData = {
  

  "layers" : [
    {
      "x" : 0,
      "height" : 789,
      "layers" : [                           
        {
          "justification" : "center",
          "font" : "Coustard",
          "x" : 276,
          "y" : 94,
          "src" : "db4922cce0cd771c28fe5c818ae313e4_Font249.ttf",
          "width" : 221,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 67,
          "text" : "BE MY",
          "height" : 50,
          "name" : "edit_be"
        },
        {
          "justification" : "center",
          "font" : "Coustard",
          "x" : 270,
          "y" : 361,
          "src" : "db4922cce0cd771c28fe5c818ae313e4_Font249.ttf",
          "width" : 236,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 37,
          "text" : "READ MORE",
          "height" : 28,
          "name" : "edit_read"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 249,
          "y" : 153,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 276,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 67,
          "text" : "VALEN",
          "height" : 51,
          "name" : "edit_valen"
        },
        {
          "justification" : "center",
          "font" : "Coustard-Black",
          "x" : 233,
          "y" : 211,
          "src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
          "width" : 306,
          "type" : "text",
          "color" : "0xFFFFFF",
          "size" : 104,
          "text" : "TINE",
          "height" : 80,
          "name" : "edit_tine"
        }
        
      ],
      "y" : 0,
      "width" : 940,
      "type" : "group",
      "name" : "fb_post_4"
    }
  ]
};

$(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\';" ' +
      '<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\';">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	

// 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>

Answer 1

在openID中保持当前打开的lightID 并使用以下功能打开和关闭链接的弹出onClick来关闭和打开。在openPopUp和closePopUp中，您将收到html元素。全局定义两个函数

  openID=null;//initial state 
 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;
     }
$('.container').append(
     '<a id ="' + layer.name + '" onclick="openPopUp('+lightID+')"' +
     '<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="closePopUp('+lightId+')">Close</a></div> <div>'
     );
     document.getElementById(lightId).style.left = layer.x + document.getElementById(layer.name).offsetWidth + 'px'
     // Above is POP UP Code
     }
     }

当我们打开一个弹出窗口时，关闭另一个弹出窗口

1 个答案: