项目代码,需要点击图片后，弹出dailog窗口，显示完整图片
html部分
1
2
3
4
5
6
7
8
9
10
11
12
| <div class=" user_upload_images">
<img src="{php echo tomedia($item['content_image'])}" class="imgg" style="width:40px;height:40px;padding:1px;border:1px solid #ccc;" />
</div>
//dialog提示框
<div id="dialog" style="text-align: center;">
<img src="" id="show_big_image" />
</div>
//使用jqueryUi
<link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
js部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $(function () {
$("#dialog").dialog({
autoOpen: false,
show: {
},
hide: {
}
});
$(".imgg").click(function () {
$("#dialog").dialog("open");
//当点击 class=imgg 的标签时，将id=show_big_image标签中的src属性赋值成 class=imgg 的标签中的src属性的值
$("#show_big_image").attr("src",$(this).attr("src"));
});
});
|
偷懒贴张手册里的图:laughing:
