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字段应该重置为＆＃34;＆＃34;。

如何在我的代码中实现这一目标？

请帮助我尝试。

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());
    });
});

这些功能触发show的{{1}}和hidden事件。一个人将根据隐藏modal中的内容设置图像，然后清除图像。

在我创建的示例中，<input>似乎接近罚款。所以不确定你遇到的问题是什么。

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>

如何在jQuery函数中传递和使用URL以及如何在单击模态上的关闭图标时解决关闭Bootstrap模式的问题？

2 个答案: