用Colorbox做到載入頁面跳出視窗

by | Jun 11, 2019 | jQuery

網頁要做出跳出視窗，一般來說，可以使用 jQuery 中的Dialog Widget做到跳出視窗的效果。可以參考下列網址：https://jqueryui.com/dialog/

Dialog如果太陽春，也可以 Reveal 這一個擴充套件，可以參考下列網址：https://zurb.com/playground/reveal-modal-plugin

而這一篇主要要介紹使用 colorbox 做到跳出視窗的效果。

Colorbox 可以做到的效果，比 Dialog 多很多，而且呈現的畫面更美觀。詳細的 colorbox 的操作方法，可以參考 colorbox 的官方網站，有更詳細的說明：https://www.jacklmoore.com/colorbox/

下面的做法，是要做到使用 colorbox，在頁面載入的時候，跳出訊息視窗。下列範例使用的是 inline 的方式，將要呈現的訊息放在頁面中，以 display:none 的方式，將區塊隱藏起來。當然，您也可以自行參考 colorbox中的範例，做到其他的呈現方式。

以下就是在頁面載入時跳出視窗的程式碼：

<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $.colorbox({inline: true, width:"80%", height:"80%", href:"#inline_content"});
    });
</script>
<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff; text-align: center;'>
        <p><strong><h1>網站公告</h1></strong></p><br>
        <p style="font-size: 24px;">
              公告內容
        </p>
    </div>
</div>

參考網址：