>apicloud中可以引用jq文件 ，经试验layer弹窗插件不可用
可使用jeBox弹窗，（jeBox不包含任何第三方库，原生js开发）
注：jq文件版本不能太高
点击缩略图显示大图
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>机构信息</title>
<link rel="stylesheet" type="text/css" href="../css/aui.css"/>
<style>
body {
height: auto;
}
.aui-card {
margin-top: 15px;
}
.aui-badge {
background-color: transparent;
color: #666;
font-size: 14px;
}
.aui-input-row .check {
padding: 8px;
color: #f1c40f;
}
.avatar {
margin-top: 13px;
}
.content {
position: absolute;
top: 50%;
right: 30px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: inline-block;
padding: 3px 6px;
font-size: 16px;
line-height: 1;
color: #333;
border-radius: 100px;
}
.check {
margin-top: 8px;
}
.maxImg{
position: fixed;
top: 25%;
left:0%;
z-index: 1002;
}
.maxImg #Images{
width: 100%;
}
#goodcover {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 133%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: 0.50;
filter: alpha(opacity=80);
}
</style>
</head>
<body>
<div class="aui-content aui-card aui-noborder">
<ul class="aui-user-view my_info" id="organInfo">
</ul>
</div>
<div id="goodcover" onclick="clos();"></div>
<div class="maxImg">
<img src="" id="Images">
</div>
</body>
<script type="text/javascript" src="../script/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/jebox.min.js"></script>
<!-- <script type="text/javascript" src="../script/layer.js"></script> -->
<script type="text/x-dot-template" id="OrganInfoT">
<li class="aui-list-view-cell" >
<a class="">机构名称 <span class="content" id="organ_name">{{=it.organ_name}}</span> </a>
</li>
<li class="aui-list-view-cell" >
<a class="">所属分类 <span class="content" id="organ_cate">{{=it.cate_name}}</span></a>
</li>
<li class="aui-list-view-cell" >
<a class=""> 机构电话 <span class="content" id="birthday" >{{=it.tel}}</span> </a>
</li>
<li class="aui-list-view-cell" >
<a class="">联系人 <span class="content" id="realname">{{=it.realname}}</span></a>
</li>
<li class="aui-list-view-cell" >
<a class="">加入时间 <span class="content" id="telphone">{{=it.create_time}}</span></a>
</li>
<li class="aui-list-view-cell" >
<a class="">所在区域 <span class="content" id="region">{{=it.province_name}}-{{=it.city_name}}-{{=it.district_name}}</span> </a>
</li>
<li class="aui-list-view-cell" >
<a class=""> 详细地址 <span class="content" id="address">{{=it.addr}}</span> </a>
</li>
<li class="aui-user-view-cell aui-img" onclick="max("quali");">
<img class="aui-img-object aui-pull-right" id="quali" src="{{=it.qualification}}" style=" margin-right: 27px">
<div class="aui-img-body ">
<h2 class="avatar">营业执照</h2>
</div>
</li>
<li class="aui-user-view-cell aui-img" >
<img class="aui-img-object aui-pull-right" id="qualification1" src="http://www.sytest.com.cn/data/upload/{{=it.idphoto1}}" style=" margin-right: 27px" onclick="max("qualification1");">
<img class="aui-img-object aui-pull-right" id="qualification2" src="http://www.sytest.com.cn/data/upload/{{=it.idphoto2}}" style=" margin-right: 27px" onclick="max("qualification2");">
<div class="aui-img-body ">
<h2 class="avatar">证件照</h2>
</div>
</li>
<li class="aui-user-view-cell aui-img" onclick="max("avatarImg");">
<img class="aui-img-object aui-pull-right" id="avatarImg" src="{{=it.logo}}" style=" margin-right: 27px">
<div class="aui-img-body ">
<h2 class="avatar">机构头像</h2>
</div>
</li>
</script>
<script type="text/javascript">
function max(url){
var ourl = document.getElementById(url).src;
document.getElementById("Images").src = ourl;
$("#maxImg").center();
$("#goodcover").show();
$("#Images").fadeIn();
}
function clos(){
$("#Images").hide();
$("#goodcover").hide();
}
/*function max(price){
jeBox.open({
padding:"0",
area:["50%","80%"],
content: document.getElementById(price),
masklock : true
})
}*/
apiready = function(){
api.parseTapmode();
var organ_id = api.pageParam.organ_id;
fnLoadData(organ_id);
jQuery.fn.center = function(loaded) {
var obj = this;
body_width = parseInt($(window).width());
body_height = parseInt($(window).height());
block_width = parseInt(obj.width());
block_height = parseInt(obj.height());
left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft());
if (body_width < block_width) {
left_position = 0 + $(window).scrollLeft();
};
top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop());
if (body_height < block_height) {
top_position = 0 + $(window).scrollTop();
};
if (!loaded) {
obj.css({
"position": "absolute"
});
obj.css({
"top": ($(window).height() - $("#maxImg").height()) * 0.5,
"left": left_position
});
$(window).bind("resize", function() {
obj.center(!loaded);
});
$(window).bind("scroll", function() {
obj.center(!loaded);
});
} else {
obj.stop();
obj.css({
"position": "absolute"
});
obj.animate({
"top": top_position
}, 200, "linear");
}
}
}
// 显示数据
function fnShowData(data_){
var apendText = $api.byId("OrganInfoT").text;
var fnapendText = doT.template(apendText);
var html = fnapendText(data_);
var list = $api.dom("#organInfo");
api.parseTapmode();
$api.append(list, html);
api.hideProgress();
}
// 加载数据
function fnLoadData(organ_id){
api.ajax({
url: "http://www.sytest.com.cn/index.php?g=Osapp&m=OrganManage&a=organ_info",
method: "post",
data: {
values: {
organ_id: organ_id
}
}
},function(ret, err){
if (ret) {
// alert( JSON.stringify( ret ) );
fnShowData(ret);
} else {
alert( JSON.stringify( err ) );
}
});
}
</script>
</html>
效果
