图像旁边的定位按钮 [英] Positioning buttons next to image
问题描述
我已经问过类似的问题 ，但是现在我已经更改了几种样式，不知道如何将关闭按钮放置在图片的右上角以及上一个图像左侧和右侧的和下一个按钮，并具有给定的距离.
I already asked a similar question, but now I have changed a few styles and have no idea how I can position the close button to the top-right corner of the image as well as the previous and next buttons on the left and right side of the image with a given distance to it.
那是在我页面的页脚之前:
That's just before the footer of my page:
<div class="modal" id="modal">
<div id="modal-content">
<span class="gallery-button" id="close">✖</span>
<span class="gallery-button" id="previous">◄</span>
<span class="gallery-button" id="next">►</span>
<img id="modal-image">
</div>
</div>
我如何显示模式:
function showModal(directory, response, i) {
modal.style.display = "block";
modalImg.src = document.getElementById(path(directory, response[i])).src;
/* previousButton.style.display = "block"; */
/* nextButton.style.display = "block"; */
}
这是我的风格:
/* Background when image is shown */
#modal {
display: none; /* Hidden by default */
/* Position */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
/* Sizing */
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(119, 119, 119); /* Fallback color */
background-color: rgba(119, 119, 119, 0.7); /* Black w/ opacity */
}
/* Image wrapper */
#modal-content {
/* Sizing */
width: 100%;
height: 100%;
}
/* Image */
#modal-image {
/* Sizing */
max-width: 80%;
height: calc(100vh * 0.6);
/* Style */
border: 10px solid #ffffff;
box-shadow: rgba(0, 0, 0, 0.54) 0px 0px 7px 4px;
/* Horizontally center image */
margin: auto;
/* Zoom (image gets bigger) on open */
animation-name: zoom;
animation-duration: 0.6s;
/* Vertically center image */
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Gallery Buttons */
.gallery-button {
/* Style */
color: #ffffff;
transition: 0.3s;
background-color: #000000;
border: 2px solid #ffffff;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 25px 3px;
/* Makes the Button round */
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 50%;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
}
/* Previous Button */
#previous {
font-size: 12px;
/* Position */
position: absolute;
/* Horizontally */
left: 30px;
/* Vertically */
top: 50%;
transform: translateY(-50%);
}
/* Next Button */
#next {
font-size: 12px;
/* Position */
position: absolute;
/* Horizontally */
right: 30px;
/* Vertically */
top: 50%;
transform: translateY(-50%);
}
/* Close Button */
#close {
font-size: 15px;
/* Position */
position: absolute;
top: 25px;
right: 30px;
}
/* Change cursor when pointing on button */
.gallery-button:hover,
.gallery-button:focus {
text-decoration: none;
cursor: pointer;
}
/* 100% image width on smaller screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
当前，关闭按钮位于整个页面的右上角，并且上一个和下一个按钮已经垂直居中(很好)，但是还没有靠近图像.我怎样才能将按钮附加到图像上.调整图像的大小有点困难，我不知道如何以不同的方式进行调整，因此我可以将已调整大小的图像和按钮放在 div 中.
Currently the close button is in the top right corner of the whole page and the previous and next buttons already centered vertically (which is good), but not yet near the image. How can I kind of attach the buttons to the image. Sizing the image was kind of hard and I have no idea how I can do it in a different way, so that I can put the sized image and the buttons in a div.
推荐答案
我已经排除了您的CSS.因为真的很乱.但是，如果您在下面查看此代码，则可以了解如何设置定位.希望您能完成其余的工作.
I have ruled out your CSS. Because it's really messy. But If you check this code below, you could understand how to set positioning. Hope you can do the rest of the work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#modal-content{
position: relative;
width:50%;
height:50%;
}
#modal-image{
width:100%;
height:auto;
}
#close{
position: absolute;
right: 0px;
top: 0px;
}
#previous{
position: absolute;
top: 50%;
left: 1%;
}
#next{
position: absolute;
top: 50%;
right: 1%;
}
</style>
</head>
<body>
<div class="modal" id="modal">
<div id="modal-content">
<img id="modal-image" src="https://dummyimage.com/vga" alt="">
<span class="gallery-button" id="close">✖</span>
<span class="gallery-button" id="previous">◄</span>
<span class="gallery-button" id="next">►</span>
</div>
</div>
<script>
function showModal(directory, response, i) {
modal.style.display = "block";
modalImg.src = document.getElementById(path(directory, response[i])).src;
/* previousButton.style.display = "block"; */
/* nextButton.style.display = "block"; */
}
</script>
</body>
</html>更新代码(根据要求)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#modal{
width:100vw;
height: 100vh;
}
#modal-content{
position: relative;
width:35%;
height:90%;
}
#modal-image{
width:100%;
height:100%;
}
#close{
position: absolute;
right: 0px;
top: 0px;
}
#previous{
position: absolute;
top: 50%;
left: 1%;
}
#next{
position: absolute;
top: 50%;
right: 1%;
}
</style>
</head>
<body>
<div class="modal" id="modal">
<div id="modal-content">
<img id="modal-image" src="https://dummyimage.com/vga" alt="">
<span class="gallery-button" id="close">✖</span>
<span class="gallery-button" id="previous">◄</span>
<span class="gallery-button" id="next">►</span>
</div>
</div>
<script>
function showModal(directory, response, i) {
modal.style.display = "block";
modalImg.src = document.getElementById(path(directory, response[i])).src;
/* previousButton.style.display = "block"; */
/* nextButton.style.display = "block"; */
}
</script>
</body>
</html>这篇关于图像旁边的定位按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
