如何弹出带有标题的图像

Question

I using bootstrap framework and I'd like to get popup image with the title but it show only image. and i don't know how to add code to show the title in js. please help me.

Here's my code:

<script>
   $(document).ready(function(){
   $('li img').on('click',function(){
   var src = $(this).attr('src');
   var img = '<img src="' + src + '" class="img-responsive"/>';

   $('#myModal').modal();
   $('#myModal').on('shown.bs.modal', function(){
   $('#myModal .modal-body').html(img);
            });
            $('#myModal').on('hidden.bs.modal', function(){
                $('#myModal .modal-body').html('');
            });
       });  
    })

</script>

<div class="row">
    <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <ul class="main-icon">
            <li class="tp-icon"><a href="#"> <img src="img/khmermart.png">        <p>name</p> <p>passowrd</p> </a>

            </li>
            <li class="tp-icon"><a href="#"> <img src="img/wing.png"><p>name</p> <p>passowrd</p></a>

            </li>
            <li class="tp-icon"><a href="#"> <img src="img/AMK.png"><p>name</p><p>passowrd</p></a>

            </li>
        </ul>
    </div>
</div>
<div class="popup">
    <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-body"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

Answer 1

You have to set all your data attributes for each modal so you can then retrieve them when you open up the modal popup.

 $(document).ready(function() { loadGallery(true, 'a.thumbnail'); function loadGallery(setIDs, setClickAttr) { var selector, counter = 0; function updateGallery(selector) { var $sel = selector; current_image = $sel.data('image-id'); $('#image-gallery-caption').text($sel.data('caption')); $('#image-gallery-title').text($sel.data('title')); $('#image-gallery-image').attr('src', $sel.data('image')); disableButtons(counter, $sel.data('image-id')); } if (setIDs == true) { $('[data-image-id]').each(function() { counter++; $(this).attr('data-image-id', counter); }); } $(setClickAttr).on('click', function() { updateGallery($(this)); }); } });

 .page-header { text-align: center; } a.thumbnail, .thumbnail:hover, .thumbnail:focus, .thumbnail:active { border: none; outline: none; } .caption { text-align: center; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header">Modal + Image</h1> <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 1" data-caption="This a caption 1" data-image="http://placehold.it/350x150/f00/fff" data-target="#image-gallery" /> <img class="img-responsive" src="http://placehold.it/350x150/548457/fff" alt="" /> </a> </div> <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 2" data-caption="This a caption 2" data-image="http://placehold.it/350x150/000/fff" data-target="#image-gallery" /> <img class="img-responsive" src="http://placehold.it/350x150/000/fff" alt="" /> </a> </div> <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 3" data-caption="This a caption 3" data-image="http://placehold.it/350x150/266080/fff" data-target="#image-gallery" /> <img class="img-responsive" src="http://placehold.it/350x150/266080/fff" alt="" /> </a> </div> <div class="thumb"><a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title 4" data-caption="This a caption 4" data-image="http://placehold.it/350x150/1c1c1c/fff" data-target="#image-gallery" /> <img class="img-responsive" src="http://placehold.it/350x150/1c1c1c/fff" alt="" /> </a> </div> </div> <div class="modal fade" id="image-gallery" 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="image-gallery-title"></h4> </div> <div class="modal-body"> <img id="image-gallery-image" class="img-responsive" src="" /> </div> <div class="modal-footer"> <div class="col-md-12 text-justify" id="image-gallery-caption">This text will be overwritten by jQuery</div> </div> </div> </div> </div> </div>

Answer 2

I am not sure where you want the title to show, so I am assuming you want it in the default bootstrap modal header. You would update the modal code as follows, to include the header (you can remove the close button if required):

<div class="popup">
    <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" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body"></div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

Then you would modify your js like this:

<script>
    $(document).ready(function(){
        $('li img').on('click',function(){
            var src = $(this).attr('src');
            var img = '<img src="' + src + '" class="img-responsive"/>';
            var title = src;
        });
        $('#myModal').modal();
        $('#myModal').on('shown.bs.modal', function(){
            $('#myModal .modal-body').html(img);
            $('#myModal .modal-title').text(title);
        });
        $('#myModal').on('hidden.bs.modal', function(){
            $('#myModal .modal-body').html('');
            $('#myModal .modal-title').text('');
        });
    });
</script>

If you want to use just the file name, you can set a title for the image that is just the filename and use it:

example of one of your list items with added title:

<li class="tp-icon"><a href="#"> <img src="img/AMK.png" title="AMK"><p>name</p><p>passowrd</p></a>
</li>

and the js to replace previous examples title var:

var title = $(this).attr("title");