自己写的JQery插件InDoc 仿nyroModal

于 2011-07-17 08:10:19 发布
阅读量1.2k 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： JavaScript 文章标签： function url class iframe xhtml div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Lijun7788/article/details/6611641
本文介绍了一个基于 jQuery 的 indoc 插件，该插件可以为网页元素添加弹出 iframe 的功能，支持自定义宽度、高度及滚动条设置。通过简单的 HTML 标签属性配置即可实现丰富的交互效果。
 

哈哈主js文件

jquery.indoc.js

 / *
   程序:hahaman
   时间:2008-9-10
   版本：1.0
   Blog:http://blog.sina.com.cn/hahaman
 * /

jQuery(function($) {
 $.fn.indoc = function() {
  if (!this) return false;
  return this.each(function(){   
   $(this).click(function(e) {
      var el= e.srcElement;
      var url;
      if(el.href)
       url=el.href;
      if(el.src)
       url=el.src;
      sAlert(url,el);
    return false;
      });
   });
  };
  
 $(".indoc").indoc(); 
 function sAlert(url,obj){
  var eSrc=obj;
  var shield = document.createElement("DIV");
  shield.id = "shield";
  shield.style.position = "absolute";
  shield.style.left = "0px";
  shield.style.top = "0px";
  shield.style.width = "100%";
  shield.style.height = ((document.documentElement.clientHeight>document.documentElement.scrollHeight)?document.documentElement.clientHeight:document.documentElement.scrollHeight)+"px";
  shield.style.background = "#333";
  shield.style.textAlign = "center";
  shield.style.zIndex = "10000";
  shield.style.filter = "alpha(opacity=0)";
  shield.style.opacity = 0;

  var alertFram = document.createElement("DIV");
  alertFram.id="alertFram";
  alertFram.style.position = "absolute";
  alertFram.style.width = "600px";
  if(eSrc.width)
   alertFram.style.width = eSrc.width+"px";
  alertFram.style.height = "400px";
  if(eSrc.height)
   alertFram.style.height = eSrc.height+"px";   
  alertFram.style.marginTop="-"+(alertFram.style.height.replace("px","")/2);
  alertFram.style.marginLeft="-"+(alertFram.style.width.replace("px","")/2);
  alertFram.style.background = "#ccc";
  alertFram.style.textAlign = "center";
  alertFram.style.lineHeight = "150px";
  alertFram.style.zIndex = "10001";
  alertFram.style.top="50%";
  alertFram.style.left="50%";
  var scrolling="yes";
  if(obj.nodeName=="IMG")
   scrolling="no";
  if(obj.scrolling)
   scrolling=obj.scorlling;
  strHtml="<div style='position:absolute;top:-20px;left:100%;width:20px;margin-left:0px'>\n";
  strHtml+="<input id='do_OK' onclick=\"doOk()\" type='button' value='ok'></div>\n";
  strHtml+="<iframe src='"+url+"' width=100% height=100% frameborder=0 scrolling="+scrolling+"></iframe>";
  alertFram.innerHTML = strHtml;
  document.body.appendChild(alertFram);
  document.body.appendChild(shield);
  this.setOpacity = function(obj,opacity){
   if(opacity>=1)opacity=opacity/100;
   try{ obj.style.opacity=opacity; }catch(e){}
   try{
    if(obj.filters.length>0&&obj.filters("alpha")){
     obj.filters("alpha").opacity=opacity*100;
    }else{
     obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
    }
   }catch(e){}
  };
  var c = 0;
  this.doAlpha = function(){
   if (++c > 20){clearInterval(ad);return 0;}
   setOpacity(shield,c);
  }
  var ad = setInterval("doAlpha()",1);
  this.doOk = function(){  
   document.body.removeChild(alertFram);
   document.body.removeChild(shield);
   eSrc.focus();
   document.body.onselectstart = function(){return true;}
   document.body.oncontextmenu = function(){return true;}
  }
   document.getElementByIdx("do_OK").focus();
   eSrc.blur();
   document.body.onselectstart = function(){return false;}
   document.body.oncontextmenu = function(){return false;}
   
 };
 
});

 

测试页面:

haha.htm

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0029)http://nyromodal.nyrodev.com/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><META http-equiv="Content-Type" content="text/html; charset=GBK"> 
 <TITLE>indoc:: jQuery Plugin</TITLE>
 <SCRIPT type="text/javascript" src="./js/jquery-1.2.6.pack.js"></SCRIPT>
 <SCRIPT type="text/javascript" src="./js/jquery.indoc.js"></SCRIPT>

</HEAD><BODY>

<A href="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal" width="1000" height="600">Ajax</A><BR>
<A href="http://www.baidu.com" class="indoc" rev="modal" width="800" height="600" scrolling="no">Ajax</A><BR>
<A href="http://nyromodal.nyrodev.com/demoSent.php" class="indoc">Ajax</A><BR>
<img src='http://www.baidu.com/img/baidu_logo.gif' class="indoc"><br>

<br>
<br><br><br><br><br><br>
　　　　　　　　　　　　　　　　　<select></select>


</BODY></HTML>

 

使用说明:

<a href=url width=100 height=300 scorlling=no>haha</a>

打开的Iframe　width1=100 height=300 scrolling=no

 

程序非常简单，目前只是简单实现

上张图大家看一下

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值