gpt4 book ai didi

javascript - 如何移动 "exit"按钮,使其位于模式框的右上角?

转载 作者:行者123 更新时间:2023-11-28 06:54:44 25 4
gpt4 key购买 nike

详细信息:我有一张背景图片,还有一张我在 Illustrator 中制作的正方形图片,我想将其放在上面。 (这是作为打开模态窗口的按钮)但是,模态窗口的“关闭”按钮出现在我的背景图像下方,而不是模态窗口的右上角。我是 HTML/CSS 的新手,非常感谢您的帮助!

这是我的 style.css:

div {
position: relative;
top: 0;
left: 0;
}

.home {
position: relative;
top: 0;
left: 0;
}

.city1 {
position: absolute;
top: 350px;
left: 40px;
}

#overlay {
visibility: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 1000;
}

#overlay div {
width: 600px;
height: 600px;
top: 300px;
left: 220px;
background-color: #FFF;
padding: 15px;
text-align: center;
}

这是我的test.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="popUp.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div>
<img src="background.jpg" alt="homeScreen" class="home"/>
<div id="overlay">
<div>
<img src="" alt="province1"/>
</div>
</div>

<img src="city1.png" class="city1" onclick='overlay()'></a>
</div>
<a href='#' onclick='overlay()'><img src="exit.png" class="exit"/></a>
</body>
</html>

这是我的 popUp.js:

function overlay() {
el= document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

最佳答案

如果你想要背景图片,那么在适当的 div 上使用 CSS background-image 属性,而不是把 <img src="background.jpg" alt="homeScreen" class="home"/>在里面。关闭图标应该是可见的,你将能够使用它的 CSS 定位,就像你所做的那样。与 home类。

关于javascript - 如何移动 "exit"按钮,使其位于模式框的右上角?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33575770/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com