#image #download #modal-dialog
#изображение #Скачать #модальный диалог
Вопрос:
У меня есть модальное изображение, при нажатии на которое открывается полноэкранный режим с текстом, отображаемым из тега alt на изображении. Я взял код с другого сайта, поэтому мне нужно изменить его, чтобы добавить ссылку для скачивания в модальный, чтобы при нажатии на ссылку он загружал файл. Возможно ли это в приведенном ниже коде?
Код ниже:
<img id="myImg1" src="test.png" alt="Hello" width="95" height="146">
<!-- The Modal -->
<script
<div id="myModal1" class="modal">
<span class="close">x</span>
<img class="modal-content" id="img01">
<div id="caption">
<div id="caption1"></div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal1');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg1');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption1");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.a<
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Любая помощь будет высоко оценена.
Комментарии:
1. Пожалуйста, укажите, с какой ошибкой или проблемой вы столкнулись. мы обязательно вам поможем 🙂
2. Ошибки нет. В настоящее время то, что там работает, но теперь я хочу добавить ссылку для скачивания внутри модального с изображением и текстом, поэтому, когда изображение появляется на экране, ссылка для скачивания доступна для загрузки файла
3. хорошо, я вижу, что в основном вам нужна ссылка для скачивания на вашем модальном?
4. я вставил тег привязки в ваш код . вам также нужен код на стороне сервера, чтобы пользователь действительно мог его загрузить
Ответ №1:
[![<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<a href="#">Download</a>
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.a<
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
Комментарии:
1. Я отредактировал свою страницу в соответствии с приведенным выше, но ссылки на скачивание я не вижу. Изображение и текст alt отображаются как обычно, а X закрывается из модального, но я нигде не вижу ссылки для скачивания. Я бы загрузил скриншот, но я не знаю, как извиниться за ответ.
2. Вот откуда я взял сценарий:
3. Большое вам спасибо, это сработало! Теперь, как бы мне перейти и оформить ссылку для скачивания? Я бы хотел, чтобы оно отображалось с правой стороны прямо под кнопкой закрытия (X) и меняло цвет на белый? Только эту ссылку для скачивания я хотел бы оформить так, чтобы она не влияла на остальные мои ссылки для скачивания на другой странице?
4. Или переместить ссылку для скачивания в середину изображения и либо выше, либо ниже его?
5. Извините за так много вопросов. Но есть еще одна проблема. Если у меня есть одно изображение, ссылка для скачивания отображается нормально, однако, если у меня есть несколько изображений на одной странице, модальное изображение теперь не появляется с добавленной ссылкой для скачивания.