已封装成为插件欢迎使用及反馈
插件下载：（访问密码9987）
bootstrap-viewer.zip
bootstrap image viewer 图片放大查看
实现效果：
<!DOCTYPE html>
<html>
<head>
<title>bootstrap 图片查看</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<td>
<center>
<img style="height: 100px;width: 100px;"
onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
onmouseout="this.style.cursor='default'"
src="test.jpg"
onclick="javascript:showimage('./test.jpg');" />
</center>
</td>
<!--放大图的imgModal-->
<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
<div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
<div class="modal-content">
<img id="imgInModalID"
class="carousel-inner img-responsive img-rounded"
onclick="closeImageViewer()"
onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"
onmouseout="this.style.cursor='default'"
/>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
<script type="text/javascript">
//显示大图
function showimage(source)
{
$("#imgModal").find("#imgInModalID").attr("src",source);
$("#imgModal").modal();
}
//关闭
function closeImageViewer(){
$("#imgModal").modal('hide');
}
</script>
</html>
https://blog.xqlee.com/article/479.html
评论
相关文章
bootstrap-table pageNumber无法获取值解决
Bootstrap-tab 组件增强插件效果图bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能：tab页初始化关闭tab...
bootstrap table跨域问题完美解决
Bootstrap 的导航菜单navba的高度修改,需要重写以下几个属性的高度,不推荐修改源文件,自己写一个名字一样的覆盖.navbar-nav>l;li>l;a {p
Bootstrap TableBootstrap Table 多选以及获取多选值实现本文主要讲解在bootstrap table组建使用过程中，配置多选和获取多选选中的值
Bootstrap Tab基础使用，首先是引入必要的css和js，这里暂时忽略核心代码：<ul class="nav nav-tabs">l;
...
问题描述最近一个项目遇到Bootstrap Table pageList 配置不生效，配置多个选项后无法还是无法弹出选择
bootstrap-select ajax动态添加值中遇到的IE兼容问题解决
该插件是基于bootstrap框架开发的一个table插件，功能强大实用性强展示结果截图:1.下载bootstrap table插件,下载2.导入插件相关的cs
在Bootstrap Table 使用过程中，从表格的columns里面的value取一些特殊字符的值会被转义，比如 &符号会被转义城&
jquery绑定鼠标滚轮滚动事件 $(document).on("mousewheel DOMMouseScroll", function (event) {