为了账号安全,请及时绑定邮箱和手机立即绑定

Jquery Js ExtJs 弹出带图层的自定义图片显示

标签:
JQuery

 <style>
html,body {
 font-size: 12px;
 margin: 0px;
 height: 100%;
}

.mesWindow {
 border: #666 1px solid;
 background: #fff;
}

.mesWindowTop {
 border-bottom: #eee 1px solid;
 margin-left: 4px;
 padding: 3px;
 font-weight: bold;
 text-align: left;
 font-size: 12px;
}

.mesWindowContent {
 margin: 4px;
 font-size: 12px;
}

.mesWindow .close {
 height: 15px;
 width: 28px;
 border: none;
 cursor: pointer;
 text-decoration: underline;
 background: #fff
}
</style>
<script>
 var isIe = (document.all) ? true : false;
 //设置select的可见状态
 function setSelectState(state) {
  var objl = document.getElementsByTagName('select');
  for ( var i = 0; i < objl.length; i++) {
   objl[i].style.visibility = state;
  }
 }
 function mousePosition(ev) {
  if (ev.pageX || ev.pageY) {
   return {
    x : ev.pageX,
    y : ev.pageY
   };
  }
  return {
   x : ev.clientX + document.body.scrollLeft
     - document.body.clientLeft,
   y : ev.clientY + document.body.scrollTop - document.body.clientTop
  };
 }
 //弹出方法
 function showMessageBox(wTitle, content, pos, wWidth) {
  closeWindow();
  var bWidth = parseInt(document.documentElement.scrollWidth);
  var bHeight = parseInt(document.documentElement.scrollHeight);
  if (isIe) {
   setSelectState('hidden');
  }
  var back = document.createElement("div");
  back.id = "back";
  var styleStr = "top:0px;left:0px;position:absolute;background:#666;width:"
    + bWidth + "px;height:" + bHeight + "px;";
  styleStr += (isIe) ? "filter:alpha(opacity=0);" : "opacity:0;";
  back.style.cssText = styleStr;
  document.body.appendChild(back);
  showBackground(back, 50);
  var mesW = document.createElement("div");
  mesW.id = "mesWindow";
  mesW.className = "mesWindow";
  mesW.innerHTML = "<div class='mesWindowTop' ><table  width='100%' height='100%'><tr><td>"
    + wTitle
    + "</td><td style='width:1px;'><input type='button'  title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div  class='mesWindowContent' id='mesWindowContent'>"
    + content + "</div><div class='mesWindowBottom'></div>";
  styleStr = "left:0px;top:25px;position:absolute;";
  mesW.style.cssText = styleStr;
  document.body.appendChild(mesW);
 }
 //让背景渐渐变暗
 function showBackground(obj, endInt) {
  if (isIe) {
   obj.filters.alpha.opacity += 1;
   if (obj.filters.alpha.opacity < endInt) {
    setTimeout(function() {
     showBackground(obj, endInt)
    }, 5);
   }
  } else {
   var al = parseFloat(obj.style.opacity);
   al += 0.01;
   obj.style.opacity = al;
   if (al < (endInt / 100)) {
    setTimeout(function() {
     showBackground(obj, endInt)
    }, 5);
   }
  }
 }
 //关闭窗口
 function closeWindow() {
  if (document.getElementById('back') != null) {
   document.getElementById('back').parentNode.removeChild(document
     .getElementById('back'));
  }
  if (document.getElementById('mesWindow') != null) {
   document.getElementById('mesWindow').parentNode
     .removeChild(document.getElementById('mesWindow'));
  }
  if (isIe) {
   setSelectState('');
  }
 }
 //测试弹出
 function testMessageBox(ev) {
  var objPos = mousePosition(ev);
  messContent = "<div ><img src='images/Simulation_45.JPG'/></div>";
  showMessageBox('', messContent, objPos, 1550);
 }
</script>

//下面写在body调用上面的方法

<a href="#none"  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/Simulation_46.gif"  /></a>

 

 

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消