я не могу получить модальную коробку для моих изображений галереи - PullRequest
Новая
       7

я не могу получить модальную коробку для моих изображений галереи

0 голосов
/ 05 декабря 2018

Я делаю динамический сайт в php.Это код моей галереи.Я не знаю, что пошло не так.Я не могу получить модальное окно при нажатии на мои изображения галереи.Может кто-нибудь помочь мне? 

var modal = document.getElementsByClassName('myModal');
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementsByClassName("caption");
img.onclick = function() {
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }
<?php                                       
	require_once("admin/config/connection.php");
	$proname="";
	$query1="select * from products_tb";
	$resource1=mysql_query($query1,$connection);
	$result1="";

	$id="";
	while($record=mysql_fetch_array($resource1))
	{
	     $pid=$record['pid'];
	     $img="uploads/".$record['proimg'];
	     $proname=$record['proname'];
	     $result1.="<div class='col-md-4 col-sm-4 mrgn_less prd'>
	    <img style='width:300px;' id='myImg' class='modal-content'   src='$img' '>
	<div class='myModal modal'>
	  <span class='close'>&times;</span>
	  <img class='modal-content img01' >
	  <div class='caption'></div>
	</div>
						<br>
			 </div>";		  
	}
	?>
<?php  echo $result1;?>

1 Ответ

0 голосов
/ 05 декабря 2018

Обновите ваш код JavaScript, как показано ниже 

var modal = document.getElementsByClassName('myModal');
var img = document.getElementsByClassName('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementsByClassName("caption");
img[0].onclick = function() {
  modal[0].style.display = "block";
  modalImg[0].src = this.src;
  captionText[0].innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];

, когда вы используете 'getElementsByClassName', он вернет объект элемента html. Поэтому вам нужно использовать [0], чтобы получить элемент html из этого объекта.

...