当我们打开一个弹出窗口时，关闭另一个弹出窗口 [英] close the other pop-up when we open one pop-up
本文介绍了当我们打开一个弹出窗口时，关闭另一个弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
背景:
页面中有很多行，一旦单击每行，我们就会显示弹出窗口....
We have Many lines in page , once we click on each line, we are displaying pop up....
要求:
简短:打开一个弹出窗口时，关闭另一个弹出窗口
Short : close the other pop-up when we open one pop-up
Long:当我们单击 1st 行时，它会显示1st弹出窗口，现在，当我们单击 2nd或3rd或任何其他行时，它应该关闭第一个弹出窗口&显示其他弹出窗口 ....
Long : When we click on 1st line, then its displaying 1st pop up , now when we click on 2nd or 3rd or any other line, it should close 1st pop up & display the other pop up....
如果我们只有两行，如 Codepen1 ，则此方法很好，但如果我们有多于两行，它不会关闭其他弹出窗口，如 Codepen2 ....
This is working fine if we have only two lines as in Codepen1 , but if we have more than two lines, its not closing other pop up as in 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>
推荐答案
在openID中保持当前打开的lightID 并使用以下功能打开和关闭链接的弹出onClick来关闭和打开. 在openPopUp和closePopUp中，您将收到html元素. 全局定义两个函数
Keep currently open lightID in openID and use following function to open and close the popup onClick of link for close and open. in openPopUp and closePopUp you will receive html element. define both function globally
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
}
}
这篇关于当我们打开一个弹出窗口时，关闭另一个弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
