如何在jQuery函數中傳遞和使用URL，以及如何解決在單擊模態上的關閉圖標后關閉Bootstrap模態的問題？

Question

我正在為我的網站使用Bootstrap v3.3.0框架 ：

我有以下HTML：

<a href="#" align="center" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal" onclick="showreceipt('http://localhost/images/J12345_6946.jpg');">View Receipt</a>


I want to show the following modal dialog box when user clicks on the above hyperlink. While doing so I want to pass the image URL to the modal dialog and show the image in modal dialog. Following is the modal dialog:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4>
              </div>
              <div class="modal-body" style="max-height: 420px; overflow: auto;">
                <!-- Here I want to put image tag with image "src" from hidden field -->
              </div>  
            </div>
          </div>
        </div>

以下是我為實現此目的而編寫的函數，但無法實現：

<script>
    function showreceipt(url) {
      $('div #modal-body').html('<img class="img-responsive" src="url" style="text-align:center;">');  
      $('#myModal').modal('show');
    }
    </script>

請指導我將URL值傳遞給上述函數，並在img屬性中將其用於模式對話框。

此外，單擊關閉按鈕后，模態也不會關閉。 我不知道為什么會這樣。

同樣，當用戶關閉模式時，img src字段也應重置為“”。

如何在我的代碼中實現呢？

請幫助我。

Answer 1

你可以做這樣的事情。 我創建了一個示例來顯示： http : //www.bootply.com/rbIcW7Mao8

<a href="#" align="center" type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">View Receipt</a>
<input type="hidden" id="student_url" name="student_url" value="https://www.google.co.uk/logos/doodles/2014/wassily-kandinskys-148th-birthday-5655681428357120-hp.jpg">

使用主體中的空<img>創建模態：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Rebate Receipt</h4>
      </div>
      <div class="modal-body" style="max-height: 420px; overflow: auto;">
        <img class="myImg img-responsive" src="" style="text-align:center;">
      </div>  
   </div>
  </div>
</div>

然后通過jQuery打開模式彈出窗口時設置圖像：

$(function(){
    $('#myModal').on('hidden.bs.modal', function (e) {
        $(".myImg").attr('src', "");
    });
    $('#myModal').on('show.bs.modal', function (e) {
        $(".myImg").attr('src', $("#student_url").val());
    });
});

這些功能會觸發modal的show和hidden事件。 一個將基於隱藏的<input>中的內容設置圖像，另一個將清除圖像。

在我創建的示例中， modal似乎很好。 因此，不確定您遇到的問題是什么。

Answer 2

我試圖回答你。 如果我不明白你的意思，請問。

<a href="#" align="center" type="button" class="btn btn-danger" 
   data-toggle="modal" 
   data-target="#myModal" onclick="showreceipt('http://localhost/images/J12345_6946.jpg');">View Receipt</a>
<script>
   function showreceipt(imgUrl) {
       $('#myModal').modal('show');
       $('#myModal #modal-body').html('<img class="img-responsive" />');
       $('#myModal #modal-body .img-responsive').prop('src', url);
       $('#myModal #modal-body .img-responsive').css('text-align', 'center');

       return false;
   }
</script>