モーダルで画像を開く（ポップアップ）

Question

リストからMySQLから画像ソースのパスを取得しています。ブートストラップモードでこの画像（プレビュー）を開きたいが、正しい画像が得られていない。ここで

は私のPHPコードです：ここで

$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> 
} 

は私のブートストラップモーダルコードです：

<!-- 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 --> 

は、どのように私はブートストラップモーダルでダイナミックなイメージを開くことができますか？

Answer 1

私のメモで繰り返し述べたように、モーダルをポップアップするために他のjavascriptは必要ありません。あなたは絶対に正しいです。しかし、ダイナミックコンテンツをモーダルに挿入したい場合は、何らかの外部コントロールが必要であるという点では正解でした。ダイアログ自体はブートストラップによって処理されていることを

/**** 
 
* 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 -->

注：ブートストラップドキュメントへのリンクをたどっている場合、あなたは非常に次のようなものを見ているだろう。私はそれとは何の関係もありません。私はその作品をそのまま残し、うまくいく。しかし、私はBootstrap APIにフックして、モーダルのshow.bs.modalイベントを待ち受けてください。この時点で、私はトリガー要素に戻り、その内容を取得して、私の単一モーダルに値を設定します。これはダイナミックビットです。

あなたの質問に答えて、はい。はい、私はブートストラップに関する豊富な経験を持っています。あなたは？