第一步.引入fancybox樣式文件與jQuery以及fancybox的js文件（注意link標籤要把type和rel加上，以及jQuery.js文件要在fancybox.js文件之前，之前出錯就是因爲這個小細節沒注意，蠢爆了）
<span style="white-space:pre"> </span><link href="css/fancybox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script><body>
<div class="demo">
<h4>Demo3：加載DIV，並固定在瀏覽器中央</h4>
<p><a id="showdiv" href="#inline" title="顯示一個DIV內容">點擊這裏</a>加載本頁中一個隱藏的DIV。</p>
</div>
<div style="display:none">
<div id="inline" style="width:400px; height:160px; overflow:auto;">
<p>
<img src="images/example/s1.gif" alt="" style="float:left; margin:4px" />
我們在設計WEB前端時，從前端交互設計的角度考慮，如何使用讓產品易用，有效而讓人愉悅的技術，瞭解目標用戶和他們的期望，瞭解用戶在同產品交互時彼此的行爲，瞭解“人”本身的心理和行爲特點，同時，還包括瞭解各種有效的交互方式，並對它們進行增強和擴充。
</p>
<p>交互設計是一個過程，它不僅僅是畫線框圖。交互設計最關鍵的兩個環節是頁面流程和頁面佈局，前者建立清晰的架構和嚴密的邏輯，後者整合零散的信息並確定分明的主次關係。這一切都是爲了我們的終極目標——讓我們的界面符合用戶的預期，不帶給他們任何的意外。一切都在用戶的意料之中。
</p>
</div>
</div>
</body>第三步.在頁面中編寫jq語句調用fancybox
<script type="text/javascript">
$(document).ready(function(){
$("#showdiv").fancybox();
});
</script>（這樣就可以把彈窗效果做出來啦~第一次做記錄一下，怕自己以後忘了![]()
雖然看着很簡單，但是我卻研究了好久，後面還是問了老大才幫我把這些小問題改過來了 多學習學習學習）
雖然看着很簡單，但是我卻研究了好久，後面還是問了老大才幫我把這些小問題改過來了 多學習學習學習）