您现在的位置: 365建站网 > 365学习 > 不用修改原网页,实现弹出式iframe

不用修改原网页,实现弹出式iframe

文章来源:365jz.com     点击数:336    更新时间:2009-09-12 15:00   参与评论

好久没写文章了,感觉文笔太生疏了,希望大家不要见笑。
我们在做弹出式窗体时,可以用jQuery.impromptu插件来简化许多工作。我们只需做点小小的添加就能实现强大的功能。

jquery.impromptu 下载地址:http://trentrichardson.com/Impromptu/index.PHP

效果图:

方法1:

????? 新建一个ifame容器页面:FrameContainer.aspx

该页面代码:?

?1?<%@?Page?Language="C#"?AutoEventWireup="true"?%>
?2?<script?runat="server">
?3?????
?4?????protected?string?frameName;
?5?
?6?????protected?void?Page_Load(object?sender,?EventArgs?e)
?7?????{
?8?????????frameName?=?Request["frameName"]????"";
?9?????}
10?</script>
11?<iframe?id="iframe"?src='<%=?frameName?%>'?width="100%"?scrolling="no"?frameborder="0"?onload="this.height=iframe.document.body.scrollHeight;"></iframe>

?在jquery.impromptu文件添加代码:

? ?

?1?function?getFrame(frameName)
?2?????{
?3?????????$.get(
?4?????????????????"FrameContainer.aspx?frameName="?+?frameName?,
?5?????????????????function(date)?{
?6?????????????????????$.prompt(date,?{
?7?????????????????????????buttons:?{}
?8?????????????????????});
?9?????????????????}
10?????????);
11?????}

? ?

? ?

?调用时代码

? ?

<input??type="button"?value="正常"?onclick="getFrame('default.aspx');"/>??

? ?

? ?

单击button时就在iframe载入'default.aspx'

别忘了引用jquery 和 jquery.impromptu

方法2:

????? 该方法不需容器页面来承载iframe,直接在jquery.impromptu添加代码:

? ?

1?function?getFrame(frameName)?{
2?????$.prompt("<iframe?id='iframe'?src='"?+?frameName?+?"'?width='100%'?scrolling='no'?frameborder='0'?onload='this.height=iframe.document.body.scrollHeight'></iframe>",?{
3?????????buttons:?{}
4?????});??//onload='this.height=iframe.document.body.scrollHeight'保证iframe的高度和加载的页面一直
5?
6?};

? ?

还是一样的调用方法

? ?

<input??type="button"?value="正常"?onclick="getFrame('default.aspx');"/>


?别忘了引用jquery 和 jquery.impromptu
最后我们可能需要在弹出式iframe中,做完操作就关闭弹框 这时我们需要这么写:

? ?

window.parent.document.body.removeChild(window.parent.document.getElementById("jqibox"));

? ?

jqibox 是jquery.impromptu弹出容器

Tag标签: JQuery

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (336人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------