Question

我试图为每张图片带上bootstrap模态privew。我怎么能把它带到我当前的代码中。检查我的小提琴

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

    }
}

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

如何在模态中引入自举图像预览

1 个答案: