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

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

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

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

2:     

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

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

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

7:  

2: 在js脚本里面加入

 1:  $(document).ready(function () {

 2:   

9:

10:              $("#various3").fancybox({

11:                  'width': '75%',

12:                  'height': '75%',

13:                  'autoScale': false,

14:                  'transitionIn': 'none',

15:                  'transitionOut': 'none',

16:                  'type': 'iframe'

17:              });

18:   

19:   

20:          });

21:   

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

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

2:  

 

done

 

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

 1:  <script type="text/javascript">

 2:          function parentShowContent(id) {

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

 4:  

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

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

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

 8:  

 9:  

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

11:              parent.$.fancybox.close();

12:   

13:          }

14:      </script>

15:  

 

1:  <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>

2:  

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

转载于:https://www.cnblogs.com/joeylee/archive/2013/04/16/3023552.html