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

Question

点击聊天框中的图片，如何在屏幕上以全屏显示图像。

我尝试点击图片时没有在总屏幕图像显示中打开

如下所示我们想要

http://jsfiddle.net/YbMTg/666/

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>