[Colorbox套件]_使用筆記1_燈罩跳窗
官網範例
https://www.jacklmoore.com/colorbox/example1/
官方載點:
http://www.jacklmoore.com/colorbox/
github:
https://github.com/jackmoore/colorbox
CDN:
https://cdnjs.com/libraries/jquery.colorbox
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js" integrity="sha512-DAVSi/Ovew9ZRpBgHs6hJ+EMdj1fVKE+csL7mdf9v7tMbzM1i4c/jAvHE8AhcKYazlFl7M8guWuO3lDNzIA48A==" crossorigin="anonymous"></script>
//color 語法格式
// Format:
//$(selector).colorbox({key:value, key:value, key:value});
程式(父頁面)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js" integrity="sha512-DAVSi/Ovew9ZRpBgHs6hJ+EMdj1fVKE+csL7mdf9v7tMbzM1i4c/jAvHE8AhcKYazlFl7M8guWuO3lDNzIA48A==" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $("#btn_OpenSub").click(function(){ //alert("test"); //https://tw.yahoo.com/ //color 語法格式 // Format: //$(selector).colorbox({key:value, key:value, key:value}); $.colorbox({ width : 700, //lightbox中間區塊的寬度 height : 600, //lightbox中間區塊的高度 iframe:true, transition: 'elastic', href:"SubPage.html" }); }); }); </script> </head> <body> Parent Page <input type="button" id="btn_OpenSub" value="Open Sub Win" ></input> </body> </html> |
程式(子頁面)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <head> <script src=""></script> </head> <body> This is Sub Page </body> </html> |
效果
- Elastic Transition（彈性動畫）
- Fade Transition（淡入淡出動畫）
- No transition + fixed width and height 75% of screen size (無動畫，寬高以螢幕的75%自適應)
- Slideshow（幻燈片播放）
- Other Content Types （其它型別：外部html, flash和視訊，iframe的flash和視訊，iframe的外部html，內部html）
留言
張貼留言