Öffnen Sie ein dynamisches Bild in modal (Popup)

Question

Ich bin den Weg einer Bildquelle aus MySQL in einer Liste abrufen. Ich möchte dieses Bild (Vorschau) in einem Bootstrap-Modal öffnen, aber es wird nicht das richtige Bild erhalten.

Hier ist mein PHP-Code:

$sql="SELECT * FROM `dirf1` WHERE `root` = '$root' AND `pId` = '$pid' ORDER BY fileType"; 
    $result_set=mysqli_query($GLOBALS["___mysqli_ston"], $sql); 
    while($row=mysqli_fetch_array($result_set)) 
    { 
       <td><a href="f/'.$row['fileName'].'"><?php echo $link; ?><i style="font-size:22px; color:#FF9900;"></i> &emsp; <?php echo $row['fileName'] ?></a></td> 
} 

Hier ist meine Bootstrap modal Code:

<!-- Modal image preview --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title" align="center">Image</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="f/<?php echo $showName; ?>" height="100%" width="100%" > 
     </div> 
     <div class="modal-footer"> 
     </div> 
     </div> 

    </div> 
    </div> <!-- modal image preview end --> 

Wie kann ich ein dynamisches Bild in einem Bootstrap öffnen modal?

Answer 1

Wie ich wiederholt in meinen Notizen gesagt habe, brauchen Sie kein anderes Javascript, um ein Modal zu öffnen. Du hast absolut recht. Wenn Sie jedoch DYNAMIC-Inhalt in das Modal einfügen möchten, dann hatte ich recht, dass Sie eine Art externe Kontrolle benötigen. Wenn Sie den Link auf die Bootstrap-Dokumentation gefolgt, würden Sie sehen etwas sehr wie das folgende haben:

/**** 
 
* When the modal is displayed, I want to get my dynamic content. 
 
* In this case, the dynamic content is a data-whatever attribute 
 
* and the actual text content of the clicked LI element. 
 
* 
 
* I will take that content, and use it to populate my modal 
 
* dynamically. In this way, I have a single modal popup with content 
 
* from any number of sources. The only requirements are that the 
 
* triggering element have a data-whatever attribute and some 
 
* sort of text content. 
 
* All of this is happening when my modal is triggering its show 
 
* event, so it will all happen just before the modal is displayed. 
 
****/ 
 
    
 
$('#myModal').on('show.bs.modal', function (event) { 
 
    // Element that triggered the modal 
 
    var liEl = $(event.relatedTarget); 
 
    
 
    // Extract info from data-* attributes, and from the element itself. 
 
    var recipient = liEl.data('whatever'); 
 
    var textContent = liEl.text(); 
 
    
 
    // If necessary, you could initiate an AJAX request here 
 
    // (and then do the updating in a callback). 
 
    // Update the modal's content. We'll use jQuery here, but you could 
 
    // use a data binding library or other methods instead. 
 
    var modal = $(this); 
 
    
 
    // Update the dynamic portions of the modal dialog. 
 
    modal.find('.modal-title').text('New message to ' + recipient); 
 
    modal.find('.modal-body textarea[name="message-body"]').text(textContent); 
 
});

.js-my-modal-control { 
 
    width: 300px; 
 
} 
 
.js-my-modal-control li{ 
 
    cursor: pointer; 
 
} 
 
.js-my-modal-control li:hover{ 
 
    background-color: #ccc; 
 
} 
 
.modal textarea { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="js-my-modal-control list-group"> 
 
    <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="andrej@foo.bar">Cras justo odio</li> 
 
    <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="boris@foo.bar">Dapibus ac facilisis in</li> 
 
    <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="cherise@foo.bar">Morbi leo risus</li> 
 
    <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="daoud@foo.bar">Porta ac consectetur ac</li> 
 
    <li class="list-group-item" data-toggle="modal" data-target="#myModal" data-whatever="esteban@foo.bar">Vestibulum at eros</li> 
 
</ul> 
 

 
<!-- Modal which I will be filling with dynamic content --> 
 
<div id="myModal" class="modal fade" tabindex="-1" role="dialog"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
     <h4 class="modal-title">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <textarea name='message-body'></textarea> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div><!-- /.modal-content --> 
 
    </div><!-- /.modal-dialog --> 
 
</div><!-- /.modal -->

Beachten Sie, dass der Dialog sich von Bootstrap gehandhabt wird. Ich habe nichts damit zu tun. Ich lasse dieses Stück in Ruhe, da es gut funktioniert. Aber ich kann und SOLLTE mich in die Bootstrap-API einklinken und auf das show.bs.modal Ereignis des Modals warten - an dieser Stelle möchte ich auf das auslösende Element zurückkommen, seinen Inhalt abrufen und mein einzelnes Modal auffüllen. DAS IST DAS DYNAMISCHE BIT.

Und um Ihre Frage zu beantworten, ja. Ja, ich habe umfangreiche Erfahrung mit Bootstrap. Hast du?