单击“文本”后，我们将显示“弹出框”。
要求：
当用户点击外部弹出窗口时，我正尝试隐藏此处的弹出窗口：https://codepen.io/kidsdial/pen/VNxMYO...。
问题：
为此，我尝试使用以下代码，但是此后，当我尝试通过下拉 更改字体家族时，弹出窗口将关闭。...
$(document).mouseup(function(e)
{
var container = $('.white_content');
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
$('.font-select').css('display', 'none');
}
});
$(document).mouseup(function(e)
{
var container = $('.dark_content');
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
// close text pop up onclick outside
$(document).mouseup(function(e)
{
var container = $('.white_content');
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
// end
//font color
var className;
function changeColor(data) {
var color = $(data).css('background-color');
var changeColor = $(className).css('color', color);
}
//font color end
// Display pop up next to text
function closePopUp(el) {
el.style.display = 'none';
$('.font-select').css('display', 'none');
openID = null
}
function openPopUp(el) {
// console.log(el);
if (openID != null) {
closePopUp(openID)
}
var styleTop = el.style.top;
var styleLeft = el.style.left;
styleTop = parseInt(styleTop.substring(3 , -1)) + 130;
styleLeft = parseInt(styleLeft.substring(3 , -1)) + 30;
$('.font-select:first').css({
display: 'block',
left: styleLeft + 'px',
top: styleTop + 'px',
zIndex: 1010
});
//font color
var colorID = el.id.substring(5);
className = '#' + colorID;
//font color end
el.style.display = 'block';
openID = el;
}
function fontRange(e) {
var element = e.parentElement.id;
element = "#edit_" + element.split("_")[1];
$(element).css('font-size', e.value + 'px');
}
let openID = null;
var target;
const imageUrl = "https://i.imgur.com/RzEm1WK.png";
let jsonData = {
"path" : " fb post\/",
"info" : {
"author" : "",
"keywords" : "",
"file" : "fb post",
"date" : "sRGB",
"title" : "",
"description" : "Normal",
"generator" : "Export Kit v1.2.8"
},
"name" : "fb post",
"layers" : [
{
"x" : 0,
"height" : 789,
"layers" : [
{
"x" : 0,
"color" : "0xFF606D",
"height" : 789,
"y" : 0,
"width" : 940,
"shapeType" : "rectangle",
"type" : "shape",
"name" : "bg_rectangle_1"
},
{
"x" : 0,
"height" : 788,
"layers" : [
{
"x" : 0,
"height" : 788,
"src" : "2627e475d59546ec8522df6f89713867_frame0.png",
"y" : 0,
"width" : 506,
"type" : "image",
"name" : "bg_image"
}
],
"y" : 0,
"width" : 506,
"type" : "group",
"name" : "user_image_1"
},
{
"x" : 465,
"height" : 411,
"src" : "5faf41823c9ccd92485912c6fa6befcc_frame1.png",
"y" : 206,
"width" : 443,
"type" : "image",
"name" : "shape_1"
},
{
"x" : 228,
"height" : 150,
"src" : "724c7c5b06fae34d68633c349ccb752a_frame2.png",
"y" : 609,
"width" : 175,
"type" : "image",
"name" : "shape_2"
},
{
"justification" : "center",
"font" : "Coustard",
"x" : 576,
"y" : 294,
"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" : 570,
"y" : 561,
"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" : 549,
"y" : 353,
"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" : 533,
"y" : 411,
"src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
"width" : 306,
"type" : "text",
"color" : "0xFFFFFF",
"size" : 104,
"text" : "TINE",
"height" : 80,
"name" : "edit_tine"
},
{
"justification" : "center",
"font" : "Coustard-Black",
"x" : 274,
"y" : 641,
"src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
"width" : 74,
"type" : "text",
"color" : "0xFFFFFF",
"size" : 23,
"text" : "SAVE",
"height" : 17,
"name" : "edit_save"
},
{
"justification" : "center",
"font" : "Coustard-Black",
"x" : 274,
"y" : 665,
"src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
"width" : 71,
"type" : "text",
"color" : "0xFFFFFF",
"size" : 28,
"text" : "THE",
"height" : 21,
"name" : "edit_the"
},
{
"justification" : "center",
"font" : "Coustard-Black",
"x" : 274,
"y" : 693,
"src" : "0a7fb3015bb19745da114bc581e96947_Font248.ttf",
"width" : 72,
"type" : "text",
"color" : "0xFFFFFF",
"size" : 22,
"text" : "DATE",
"height" : 17,
"name" : "edit_date"
}
],
"y" : 0,
"width" : 940,
"type" : "group",
"name" : "fb_post_4"
}
]
};
const containerElement = $('#container');
const fileUp = $('#fileup');
$(function() {
// below code will upload image onclick mask image
containerElement.click(function(e) {
// filtering out non-canvas clicks
if (e.target.tagName !== 'CANVAS') return;
// getting absolute points relative to container
const absX = e.offsetX + e.target.parentNode.offsetLeft + e.currentTarget.offsetLeft;
const absY = e.offsetY + e.target.parentNode.offsetTop + e.currentTarget.offsetTop;
const $canvasList = $(this).find('canvas');
// moving all canvas parents on the same z-index
$canvasList.parent().css({
zIndex: 0
});
$canvasList.filter(function() { // filtering only applicable canvases
const bbox = this.getBoundingClientRect();
const canvasTop = bbox.top + window.scrollY;
const canvasLeft = bbox.left + window.scrollX;
return (
absX >= canvasLeft && absX <= canvasLeft + bbox.width &&
absY >= canvasTop && absY <= canvasTop + bbox.height)
}).each(function() { // checking white in a click position
const x = absX - this.parentNode.offsetLeft - e.currentTarget.offsetLeft;
const y = absY - this.parentNode.offsetTop - e.currentTarget.offsetTop;
const pixel = this.getContext('2d').getImageData(x, y, 1, 1).data;
if (pixel[3] === 255) {
$(this).parent().css({
zIndex: 2
})
target = this.id;
console.log(target);
setTimeout(fileUp.click.bind(fileUp), 20);
}
})
});
// Below code will fetch mask images from json file
function getAllSrc(layers) {
let arr = [];
layers.forEach(layer => {
if (layer.src) {
arr.push({
src: layer.src,
x: layer.x,
y: layer.y,
height: layer.height,
width: layer.width,
name: layer.name
});
} else if (layer.layers) {
let newArr = getAllSrc(layer.layers);
if (newArr.length > 0) {
newArr.forEach(({
src,
x,
y,
height,
width,
name
}) => {
arr.push({
src,
x: (layer.x + x),
y: (layer.y + y),
height,
width,
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 = [];
containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
for (let {
src,
x,
y,
name
} of arr) {
//Get Height and width of mask image [ edit button ]
var ImagePosition = arr;
//code end
// Display icon only for mask images
if (name.indexOf('mask_') !== -1) {
var imageUrl1 = imageUrl;
} else {
var imageUrl1 = '';
// click work only on mask image
$('.masked-img').css('pointer-events', 'none');
// click end
}
//code end
var mask = $(".container").mask({
imageUrl: imageUrl1,
maskImageUrl: 'http://piccellsapp.com:1337/parse/files/PfAppId/' + src,
onMaskImageCreate: function(img) {
// Mask image positions
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
// end
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
let mask2 = table[target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Edit image
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\'>" +
$('#demoTemplate').html() +
"<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"
});
}
// Edit code end here....
// Remove image
$("<br/><span id=\"" + newImageLoadedId + "\" class=\"remove\">Remove</span>").insertAfter(".masked-img" + newImageLoadedId).css({
"left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
"top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2 + 25) + "px"
});
$(".remove").click(function(event) {
const canvasId = "canvas#" + event.currentTarget.id;
// Delete the image
const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
ctx.fillStyle = "white"
ctx.fillRect(0, 0, 500, 500)
// Delete the Remove button
$(this).next().find('.edit').remove()
$(this).remove();
});
// Remove image code end here....
};
counter++;
}
drawText(data);
}
json(jsonData);
}); // end of document ready
//Fetch text
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 = 'https://i.imgur.com/' + 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(
'<input id="font" style="display:none"><a id ="' + layer.name + '" onclick="openPopUp(' + lightId + ')"' +
'<div class="txtContainer" id = "text" 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; ' + '"> ' +
$('#template2').html() +
'<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
}
}
// text end
// images drag
(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.mousePosition = function(event) {
return {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 0
});
JQmasks.forEach(function(el) {
var id
= item.length > 0 ? $(item).attr("id") : "";
if (el.id == id)
el.item.enable();
else el.item.disable();
});
};
container.enable = function() {
draggable = true;
$(canvas).attr("active", "true");
div.css({
"z-index": 2
});
}
container.disable = function() {
draggable = false;
$(canvas).attr("active", "false");
div.css({
"z-index": 1
});
}
container.onDragStart = function(evt) {
if (evt.target.getContext) {
var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
$(canvas).attr("active", "true");
container.selected(evt);
prevX = evt.clientX;
prevY = evt.clientY;
var img = new Image();
evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
evt.originalEvent.dataTransfer.setData('text/plain', 'anything');
}
};
container.getImagePosition = function() {
return {
x: settings.x,
y: settings.y,
scale: settings.scale
};
};
container.onDragOver = function(evt) {
if (evt.target.getContext) {
var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
if (pixel[3] === 255) {
if (draggable && $(canvas).attr("active") === "true") {
var x = settings.x + evt.clientX - prevX;
var y = settings.y + evt.clientY - prevY;
if (x == settings.x && y == settings.y)
return; // position has not changed
settings.x += evt.clientX - prevX;
settings.y += evt.clientY - prevY;
prevX = evt.clientX;
prevY = evt.clientY;
clearTimeout(timeout);
timeout = setTimeout(function() {
container.updateStyle();
renderInnerImage();
}, 20);
}
} else {
evt.stopPropagation();
return false;
}
}
};
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();
};
});
};
function renderInnerImage() {
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = settings.imageUrl;
img.onload = function() {
settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
context.globalCompositeOperation = 'source-atop';
context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
initImage = false;
};
}
// change the draggable image
container.loadImage = function(imageUrl) {
console.log("load");
//if (img)
// img.remove();
// reset the code.
settings.y = startY;
settings.x = startX;
prevX = prevY = 0;
settings.imageUrl = imageUrl;
initImage = true;
container.updateStyle().then(renderInnerImage);
// sirpepole Add this
return settings.id;
};
// change the masked Image
container.loadMaskImage = function(imageUrl, from) {
canvas = document.createElement("canvas");
context = canvas.getContext('2d');
canvas.setAttribute("draggable", "true");
canvas.setAttribute("id", settings.id);
settings.maskImageUrl = imageUrl;
div = $("<div/>", {
"class": "masked-img"
}).append(canvas);
// div.find("canvas").on('touchstart mousedown', function(event)
div.find("canvas").on('dragstart', function(event) {
if (event.handled === false) return;
event.handled = true;
container.onDragStart(event);
});
div.find("canvas").on('touchend mouseup', function(event) {
if (event.handled === false) return;
event.handled = true;
container.selected(event);
});
div.find("canvas").bind("dragover", container.onDragOver);
container.append(div);
if (settings.onMaskImageCreate)
settings.onMaskImageCreate(div);
container.loadImage(settings.imageUrl);
};
container.loadMaskImage(settings.maskImageUrl);
JQmasks.push({
item: container,
id: settings.id
})
// Edit image
div.addClass('masked-img' + settings.id);
// code end
return container;
};
}(jQuery));
//Zoom in , Zoom out , Rotate code
document.getElementById("img").src = json(data);
var angle = 0;
var scale = 1;
var $img = $('#image');
$img.on('transform', function() {
$img.css('transform', `rotate(${angle}deg) scale(${scale})`);
});
$('.js-rotate-right').on('click', function() {
angle += 15;
$img.trigger('transform');
});
$('.js-rotate-left').on('click', function() {
angle -= 15;
$img.trigger('transform');
});
$('.js-zoom-in').on('click', function() {
scale += 0.25;
if (scale == 2.25) {
scale = 2;
};
$img.trigger('transform');
});
$('.js-zoom-out').on('click', function() {
scale -= 0.25;
if (scale == 0) {
scale = 0.25;
}
$img.trigger('transform');
});.container {
background: silver;
position: relative;
}
.container img {
position: absolute;
top: 0;
bottom: 250px;
left: 0;
right: 0;
margin: auto;
z-index: 999;
}
.masked-img {
overflow: hidden;
position: relative;
}
.txtContainer {
position: absolute;
text-align: center;
color: #FFF
}
.txtContainer:hover {
background: red;
padding: 1px;
border-style: dotted;
}
.pip {
display: inline-block;
margin: 0;
position: absolute;
}
.remove {
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
position: absolute;
z-index: 3;
}
.remove:hover {
background: white;
color: black;
}
.edit {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
position: absolute;
z-index: 3;
}
.edit:hover {
background: white;
color: black;
position: absolute;
z-index: 3;
}
.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;
}
.dark_content {
display: none;
position: relative;
top: 25%;
left: 25%;
width: 350px;
height: 350px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
.radiobutton {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 10px;
cursor: pointer;
}
.radiobutton span {
display: block;
position: absolute;
width: 50px;
height: 50px;
padding: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 100%;
background: #eeeeee;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition: ease .3s;
}
.radiobutton span:hover {
padding: 10px;
}
.orange .radiobutton span {
background: #FF5722;
}
.red .radiobutton span {
background: #FFC107;
}
.radiocolor {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: transparent;
/*transition: ease .3s;*/
z-index: -1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/fontselect.css" />
<script src="https://www.jqueryscript.net/demo/Easy-Google-Web-Font-Selector-With-jQuery-Fontselect/jquery.fontselect.js"></script>
<style>
.font-select {
display: none;
}
</style>
<input id="fileup" name="fileup" type="file" style="display:none" >
<div id="container"class="container">
</div>
<template id='demoTemplate'>
<span>
<div class="btn-group">
<button type="button" class="js-zoom-in">Zoom In</button>
<button type="button" class="js-zoom-out">Zoom Out</button>
<button type="button" class="js-rotate-right">Rotate Right</button>
<button type="button" class="js-rotate-left">Rotate Left</button>
</div>
<img id="image" src ="" style ="display:none">
</span>
</template>
<template id='template2'>
<input type="range" min="60" max="90" oninput="fontRange(this)" onchange="fontRange(this)">
<label class="orange">
<input type="radio" name="color" value="orange" style="display:none" >
<div class="radiocolor"></div>
<div class="radiobutton"><span onclick="changeColor(this)"></span></div>
</label>
<label class="red">
<input type="radio" name="color" value="red" style="display:none" >
<div class="radiocolor"></div>
<div class="radiobutton"><span onclick="changeColor(this)"></span></div>
</label>
<script>
$(function() {
$('#font').fontselect().change(function() {
// replace + signs with spaces for css
var font = $(this).val().replace(/\+/g, ' ');
// split font into family and weight
font = font.split(':');
// set family on paragraphs
$('p').css('font-family', font[0]);
});
$('.font-select').click(function (index) {
var targetFontFamily = index.target.style.fontFamily;
var targetFontWeight = index.target.style.fontWeight;
$(className).css({
fontFamily: targetFontFamily,
fontWeight: targetFontWeight
});
})
});
</script>
</template>
答案 0 :(得分：3)
什么都没做，只需将下拉菜单添加到container var即可解决问题
var container = $('.white_content, .font-select');
现在，当您选择下拉菜单时，弹出窗口不会关闭
答案 1 :(得分：1)
编辑：
针对评论，针对该问题中发布的代码的另一种建议是尝试：
document.addEventListener("input", closePopup);
function closePopup(event){
if(event.target == document.getElementById("font")){
console.log("font changed");
popup.style.display = "none"; // `popup` must have a reference to the popup
}
}
当ID为input的隐藏font元素接收到输入（大概是从用户在“下拉列表”之一中进行选择的）时，弹出窗口应该关闭-尽管我尚未能够测试这一点。
dropdown仅存在于模板元素中，并且您需要可在文档中使用的本地副本，则是使用Node.cloneNode：
// Copy the template's content
const templateElement = document.getElementById("templateForDropdown"),
originalDropdown = templateElement.content, // It's in the .content property
copyOfDropdown = originalDropdown.cloneNode(true); // `true` clones descendants
copyOfDropdown.id = "dropdown1"; // Don't use the same `id` twice
// Add the copy to the DOM
const container = document.getElementById("container");
container.appendChild(copyOfDropdown);
console.log("(You have to click 'full-page' to properly view the SO snippet results)");
console.log(container.outerHTML);#container{ width: 120px; height: 100px; border: 1px solid grey; padding: 10px 20px 60px 20px; }<template id="templateForDropdown">
<select id="dropdown0">
<option>1</option>
<option>2</option>
</select>
</template>
<div id="container">
<h4>Dropdown...</h4>
</div>
（...，或者，如果模板在另一个文档或iframe中，则需要Document.importNode()。）
else ... if部分确保单击下拉列表或其子级不会关闭弹出窗口。）可以根据自己的目的随意对其进行修改。
// Select particular elements
const button = document.getElementById("button");
const popup = document.getElementById("popup");
const dropdown = document.getElementById("dropdown");
// Listen for clicks
document.addEventListener("click", togglePopup);
// Respond to clicks
function togglePopup(event){
// Show popup when user clicks button
if(event.target == button){
popup.style.display = "block";
}
// Otherwise...
else {
// ... As long as the click is not on dropdown or its children...
if(event.target != dropdown && event.target.parentNode != dropdown){
// ... close the popup
popup.style.display = "none";
}
}
}#popup{ display: none; }
#container{ border: 1px solid grey; padding: 10px 20px 80px 20px; }<div id="container">
<div id="popup">I'm a popup</div>
<br />
<button id="button">Show Popup</button>
<br /><br />
<select id="dropdown">
<option>1</option>
<option>2</option>
</select>
</div>