Question

我想在flex容器中有一系列项目，点击后会触发弹出窗口。但是，似乎每个项目至少涉及一个功能。有多个弹出窗口可以有一个功能吗？非常感谢。

.flex-image {
width: 22.5%;
height: 195px;
margin: 10px;
font-size: auto;
padding: 85px;
background-size: cover;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

<div class="flex-image" onclick="myFunction()" style = "background-
image:url(Images/Sample1.jpg);"> <span class="popuptext" id="myPopup"><img 
class = "intimage" src= "Images/Sample1.jpg"> </span> </div>
<div class="flex-image" onclick="myFunction()" style = "background-
image:url(Images/Sample2.jpg);"> <span class="popuptext" id="myPopup"><img 
class = "intimage" src= "Images/Sample2.jpg"> </span></div>
<script>
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
function myFunction1() {
var popup = document.getElementById("myPopup1");
popup.classList.toggle("show");
}
...
</script>

有没有办法让它打开用户选择的弹出窗口而不必每次都创建一个新功能？

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
    .box{
        border:5px solid red;
        background:#000;
        padding:50px;
        height:150px;
        width:320px;
        cursor:pointer;
        margin-bottom:30px;

    }
    .box>h2{
        color:#fff;
        text-align:center;
    }
    .popup{
        border:5px solid #000;
        background:red;
        padding:50px;
        height:150px;
        width:70%;
        cursor:pointer;
        position:fixed;
        top:200px;
        left:50px;
        display:none;
    }

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $(".box").on('click', function(){
        $(".popup").show();
   });
    $(".close").on('click', function(){
        $(".popup").hide();
   });
});
</script>
</head>
<body>

<div class="box">
    <h2>1</h2>
</div>

<div class="box">
    <h2>2</h2>
</div>

<div class="box">
    <h2>3</h2>
</div>

<div class="popup">
 <a href="#" class="close">close<a>
</div>

</body>
</html>

多个带有HTML / CSS的弹出窗口

1 个答案: