如何移动 "exit" 按钮，使其位于模式框的右上角？

Question

详情：我有一张背景图片，还有一张我在 Illustrator 中制作的正方形图片，我想将其放在上面。（这是作为打开模态 window 的按钮）但是，模态 window 的 "close" 按钮出现在我的背景图像下方，而不是出现在背景图像的右上角模态 window。我是 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";
}

Answer 1

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

Answer 2

第一步，您应该将 <a href='#' onclick='overlay()'><img src="exit.png" class="exit"/></a> 放在叠加层 <div> 中。然后，将图标移动到右上角就是应用正确的 CSS 属性的问题，例如http://www.w3schools.com/css/css_positioning.asp

如何移动 "exit" 按钮，使其位于模式框的右上角？

How do I move the "exit" button so that it's in the top right corner of my modal box?

html

javascript

css

modal-dialog