如何在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>