好久没写文章了,感觉文笔太生疏了,希望大家不要见笑。
我们在做弹出式窗体时,可以用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弹出容器