打开一个iframe，从iframe更改父窗口parent里面的内容,jquery弹出窗口插件fancybox的使用

fancybox 可以很方便的弹出图片，iframe页面

使用方法：1:  添加jquery库，fancybox脚本和css文件

<script type="text/javascript" src="../js/jquery-1.5.2.min.js"></script>

 <!-- Add fancyBox main JS and CSS files -->

 <script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

 <link rel="stylesheet" type="text/css" href="../js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

2: 在js脚本里面加入

$(document).ready(function () {

$("#various3").fancybox({

 'width': '75%',

 'height': '75%',

 'autoScale': false,

 'transitionIn': 'none',

 'transitionOut': 'none',

 'type': 'iframe'

});

  });

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

3:在需要弹开窗口 的地方，调用

<div><a id="various3" href="../person/ShowTemplate.aspx">点击这里查看过去已保存模板</a></div>

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

 

done

 

如何在打开的iframe里面，修改父窗口parent里面的内容呢？ 例如，父窗口有一个textbox文本，如何在iframe里面点击操作之后，（iframe会接着关闭），然后能更改父窗口里面的文本呢？

<script type="text/javascript">

  function parentShowContent(id) {

var con=$("#content" + id).html();  //获得iframe里面的内容

//用普通的js来获取父窗口里面的内容，通过getElementById 

//parent.document.getElementById("MainContent_txtMessage").value = con;

//parent.$.fancybox.close();

$(window.parent.document).find("textarea").html(con);

parent.$.fancybox.close();

  }

 </script>

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

 

<td class="linkcolor" align="left" valign="middle" style="line-height:28px;cursor:pointer " id='content<%#(Eval("Templateid").ToString())%>' onclick='parentShowContent("<%#(Eval("Templateid").ToString())%>")' ><%#(Eval("Content").ToString())%></td>

.codearea{ color:black; background-color:white; line-height:18px; border:1px solid #4f81bd; margin:0; width:auto !important; width:100%; overflow:auto; text-align:left; font-size:12px; font-family: "Courier New","Consolas","Fixedsys","BitStream Vera Sans Mono", courier,monospace,serif}
.codearea pre{ color:black; line-height:18px; padding:0 0 0 12px !important; margin:0em; background-color:#fff !important}
.linewrap pre{white-space:pre-wrap; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word; word-break:normal}
.codearea pre.alt{ background-color:#f7f7ff !important}
.codearea .lnum{color:#4f81bd;line-height:18px}

如果在官网下载的fancybox加入到你的代码里面不能使用，可能是jquery的主库版本与fancybox的不匹配