打开一个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/p/3023552.html