Triger изображение модальное - PullRequest
Новая
       9

Triger изображение модальное

0 голосов
/ 07 ноября 2018

Доброе утро всем!

У меня странная проблема: я не знаю, что не так. Я загружаю изображение для каждой записи в базе данных. Я загружаю имя изображения в базу данных, и изображение успешно отправлено в каталог, который я хочу.

Теперь самое сложное. Я создал модал, который напоминает этот образ. Тот же модал отлично работает на другой странице, которую я использую, но не на этой. 

<a href="#zoom" data-target="#zoom" data-toggle="modal" style="color:black;" class="small-box-footer" src="../dist/delivery_notes/<?php echo $row['del_note'];?>"><i class="glyphicon glyphicon-duplicate text-blue" aria-hidden="true"></i></a>

Модальная функция: 

<!--delivery notes zoom Modal Start--> 
<div id="zoom" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="#zoom" aria-hidden="true" style="display: none;">
  <div class="modal-dialog">
    <div class="modal-content" style="height:auto" style="width:auto">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span></button>
        <h4 class="modal-title">Product Photo</h4>
        </div>
        <div class="modal-body">
        <div class="form-group">
            <img class="img-responsive" src="" id="prod_pic">  
        </div>
       </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>      
        </div>

        </div><!--end of modal-dialog-->
 </div>
 <!--end of zoom modal-->

Моя проблема в том, что модал запущен, но не показывает изображение. Это пусто. Что мне здесь не хватает?

1 Ответ

0 голосов
/ 07 ноября 2018

Здравствуйте и добро пожаловать в переполнение стека.

Изображение пустое, потому что ваш src установлен как пустой, а вы не устанавливаете и не изменяете его.

Также нет необходимости в #zoom в href. Таким образом, вы можете изменить свой тег привязки на следующее: 

<a href="javascript:;" data-target="#zoom" data-toggle="modal" style="color:black;" class="small-box-footer" rel="../dist/delivery_notes/<?php echo $row['del_note'];?>" onclick="changeImage(this)"><i class="glyphicon glyphicon-duplicate text-blue" aria-hidden="true"></i></a>

А затем добавьте следующий JavaScript: 

   <script>

function changeImage(elem){
document.getElementById("prod_pic").src = elem.rel;
    }

</script>
...