如何在聊天框中单击图像时全屏显示图像

Question

如何在聊天框中点击图片时全屏显示图片

我试过点击图片时它没有在全屏图片中打开显示

像下面我们要的

$(document).on('click', '#im', function (){
 $(".popphoto").toggle(function()
   {
    $(this).animate({width: "400px"}, 'slow');},
        function()
        {$(this).animate({width: "120px"}, 'slow');
    });
 });

<div class="right">
     <img class="popphoto" src="images\services.jpg" width="100%" height="100px">
 </div>

Answer 1

试试这个：

$('#im').click(function(){
  $('#divLoading').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right">
  <img  id="im" src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="100px" height="100px">
</div>


<div id="divLoading" style="margin: 0px; padding: 0px; position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; background-color: #ffffff; z-index: 30001; opacity: 1; filter: alpha(opacity=70);display:none" > 
    <p style="position: absolute; top: 20%; left: 20%; color: White;"> 
        <img  id="im" src="http://www.html-helper.net/wp-content/uploads/2013/07/HTML.jpg" width="100%" height="100%">
    </p> 
</div>

如何在聊天框中单击图像时全屏显示图像

How to show image in full screen when click on image in chat box

html

css

image

screen