1.Boothstraip4版本 4.0.0 Jquery-3.3.1.min.js
Boothstraip和fancybox 需引用檔案及順序，在head引用
然後在</body>結尾上面引用下面連結檔案，檔案在自行上網下載
<link rel="stylesheet" href="Boothstraip4/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="basicfancybox/jquery.fancybox.css">
然後在</body>結尾上面引用下面連結檔案，檔案在自行上網下載
<script src="basicfancybox/jquery-3.3.1.min.js" type="text/javascript"></script> <script src="basicfancybox/jquery.fancybox.js" type="text/javascript"></script> <script src="basicfancybox/fancybox-setting.js" type="text/javascript"></script> <script src="Boothstraip4/bootstrap.min.js">至於fancybox-setting.js 是當畫面一開始時找到給與fancybox的超連結，如:
$(document).ready(function(){ $("#123").fancybox({ //#123 表示畫面有一個<a id="123" href="Hello.html"/> 'overlayColor': '#000', 'padding': 0, 'width': 1000, 'autoSize': true, 'transitionIn': 'easingIn', 'transitionOut': 'easingOut', 'type': 'iframe' }); });
詳細屬性介紹可以參考，不在贅述。
2.畫面中<a id="123" href="Hello.html">ParentValue</a>
其中href是彈跳視窗內頁的程式，可以是html和aspx檔案(但aspx檔案都 要伴隨aspx.cs檔案)
3.母頁傳值到子頁接值
記得在子頁(Hello.html)要引用<script src="basicfancybox/jquery-3.3.1.min.js" type="text/javascript"></script>其中接值寫法
<body> This Is FancyBox Page <p>The id for this column is: <span id="nameid"></span></p> <script type="text/javascript"> $(document).ready(function(){$("#nameid").text(parent.document.getElementById('123').innerText); }); </script> </body>4.子頁傳值到母頁並關閉
在子頁寫上這段程式<input type="text" id="child"/> <button type="submit" id="btn">送出</button>
<script type="text/javascript"> $(document).ready(function(){ $('#btn').click(function(){ parent.$.fancybox.close(); 關掉fancybox parent.GetVal($('#child').val()); 抓母頁GetVal方法，並傳id為child值過去 }); }); </script>
在母頁寫上<div id="parent"></div> <script> function GetVal(val) { $('#parent').text(val);//在這個地方就可以賦予id為parent的值了 } </script>大功告成嚕!!!!!
沒有留言:
張貼留言