点击图片 弹出大图

<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tr>
<th>编号</th>

<th>图片</th>
<th>发布时间</th>

</tr>
@forelse($imagetext as $imagetexts)
<tr>
<td>{{ $imagetexts['id'] }}</td>

<td  >

<style>
.hidden{display:none}
.msKeimgBox { margin: 0px auto; width: auto; overflow: hidden; position: relative; height: 50px; float: left}
.mskelayBox { height: auto; width: auto; margin-top: -251px; margin-left: -494px; position: fixed; left: 50%; top: 50%; border: 7px solid lightgrey; z-index: 20; background: beige; display: none; _display:none!important }
.mskeImgBg { height: 57px; width: 100%; position: absolute; left: 0px; bottom: 0px; }
.mskeClaose { position: absolute; top: -17px; right: -17px; cursor: pointer; }
</style>
<script>
jQuery(function(){
$(".mskeLayBg").height($(document).height());
$(".mskeClaose").click(function(){$(".mskeLayBg,.mskelayBox").hide()});
$(".msKeimgBox").click(function(){$(".mske_html").html($(this).find(".hidden").html());$(".mskeLayBg").show();$(".mskelayBox").fadeIn(1000)});
$(".mskeTogBtn").click(function(){$(".msKeimgBox").toggleClass("msKeimgBox2");$(this).toggleClass("mskeTogBtn2")});
})
</script>
<div class="mskelayBox">
<div class="mske_html"></div>
<img class="mskeClaose" alt="" src="{{ asset ("/assets/img/mke_close.png") }}" >
</div>
@foreach($imagetexts['image'] as $value)
<div class="msKeimgBox">
<img src="{{$value}}" alt="" width="50px" height="50px">
<span class="hidden">
<img src="{{$value}}" alt="">
<div class="mskeImgBg"></div>
</span>
</div>
@endforeach
</td>

<td>{{ $imagetexts['created_at'] }}</td>

</tr>

<pre name="code" class="html"> @empty
<tr>
<td colspan="9" class="text-center">
4000
暂无数据</td>
</tr>
@endforelse
</table>
</div>