如何在模态中引入引导图像预览答案

【问题标题】：How to bring bootstrap image preview in modal如何在模态中引入引导图像预览
【发布时间】：2017-03-13 05:01:37
【问题描述】：

我正在尝试为每个图像带来引导模式权限。我怎样才能把它带入我当前的代码中。检查我的小提琴

http://jsfiddle.net/BrianDillingham/q9Lx1Lss/

$images = $('.imageOutput')

$(".imageUpload").change(function(event){
    readURL(this);
});

function readURL(input) {

    if (input.files && input.files[0]) {

        $.each(input.files, function() {
            var reader = new FileReader();
            reader.onload = function (e) {           
                $images.append('<img src="'+ e.target.result+'" />')
            }
            reader.readAsDataURL(this);
        });

    }
}

【问题讨论】：

您已经在预览图像了。但是您希望它在bootstrap 模态容器中预览。是你要找的吗？
是的，你是对的

标签： jquery html css twitter-bootstrap bootstrap-modal

【解决方案1】：

    $(function() {
        $('.pop').on('click', function() {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');   
        });     
});

    <a href="#" class="pop">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Great_Wave_off_Kanagawa2.jpg" style="width: 400px; height: 264px;">
    </a>

    <a href="#" class="pop">
        <img src="http://wallpapercave.com/wp/rZaowP9.jpg" style="width: 400px; height: 264px;">
    </a>

    <div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">              
          <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <img src="" class="imagepreview" style="width: 100%;" >
          </div>
        </div>
      </div>
    </div>

工作小提琴：http://jsfiddle.net/6CR2H/287/

【讨论】：