常見的彈窗技術

在這裏總結兩種彈窗技術，以供學習或複習：BootStrap Modal模態框和Custombox

1.BootStrap Modal模態框

介紹

模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。如果想要單獨引用該插件的功能，那麼您需要引用 modal.js。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

使用模態窗口，通常需要某種觸發器來觸發Modal事件，比如按鈕或標籤。在下面的實例中，我們使用的是按鈕來觸發事件。分別用三種方法實現：

實例

直接打開模態窗口實例：

<div class="content">
        <h2>創建模態框（Modal）</h2>
        <!-- 按鈕觸發模態框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button>
        <!-- 模態框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">

                        <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">在這裏添加一些文本</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                        <button type="button" class="btn btn-primary">提交更改</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>

代碼講解：

如果您仔細查看上面的代碼，您會發現在標籤中，data-target="#myModal" 是您想要在頁面上加載的模態框的目標。您可以在頁面上創建多個模態框，然後爲每個模態框創建不同的觸發器。現在，很明顯，您不能在同一時間加載多個模塊，但您可以在頁面上創建多個在不同時間進行加載。
在模態框中需要注意兩點：
1. 第一是 .modal，用來把
  的內容識別爲模態框。
2. 第二是 .fade class。當模態框被切換時，它會引起內容淡入淡出。
aria-labelledby=“myModalLabel”，該屬性引用模態框的標題。
屬性 aria-hidden=“true” 用於保持模態窗口不可見，直到觸發器被觸發爲止（比如點擊在相關的按鈕上）。
，modal-header 是爲模態窗口的頭部定義樣式的類。
class=“close”，close 是一個 CSS class，用於爲模態窗口的關閉按鈕設置樣式。
data-dismiss=“modal”，是一個自定義的 HTML5 data 屬性。在這裏它被用於關閉模態窗口。
class=“modal-body”，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的主體設置樣式。
class=“modal-footer”，是 Bootstrap CSS 的一個 CSS class，用於爲模態窗口的底部設置樣式。
data-toggle=“modal”，HTML5 自定義的 data 屬性 data-toggle 用於打開模態窗口。

以上參考菜鳥教程
2. 使用JS手動打開模態窗口

<button class="btn btn-primary btn-lg" onclick="jsOpenModal()">
            js打開模態框1
        </button>
        <br>
        <br>
        <button class="btn btn-primary btn-lg" onclick="jsOpenModal2()">
            js打開模態框2
        </button>

js代碼：

<script type="text/javascript">
    function jsOpenModal() {
        $('#myModal').modal('show');    //手動打開模態框
    }
    function jsOpenModal2() {
        $('#myModal2').modal('toggle'); //切換模態框的可見狀態，如果可見就隱藏，如果隱藏就可見
    }
</script>

模態窗口2代碼：

<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel2">
                            模態框2
                        </h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label for="type" class="control-label">type:</label>
                                <input type="text" class="form-control" id="type">
                            </div>
                            <div class="form-group">
                                <label for="style" class="control-label">style:</label>
                                <input type="text" class="form-control" id="style">
                            </div>
                            <div class="form-group">
                                <label for="content" class="control-label">content:</label>
                                <input type="text" class="form-control" id="content">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->

2.Custombox

介紹

Custombox同樣是一個彈窗插件，使用JavaScript和CSS 3實現，配置簡單，動畫效果豐富，兼容多種終端，因此也可以作爲彈窗整合的選擇。

Custombox官網

用法

官網中提供了Custombox的下載文件，各種demo展示，和一些參數簡介以及使用方法。

參數

// Instantiate new modal
new Custombox.modal({
  // Options
  content = {
    target: null,   //設置彈窗的URL，ID或者Class
    effect: 'fadein',   //設置效果，這裏是漸進漸出，其他效果官網也有展示
    id: null,   //設置ID
    container: null, //設置頁面元素容器的元素（ID或Class），如果它不存在，將根據效果自動創建。   
    close: true, // 是否允許使用esc鍵關閉彈窗 默認true
    clone: false,   //克隆DOM的元素。
    animateFrom: 'top', // 動畫出現位置 top、left、center、right
    animateTo: 'top',//動畫消失位置 top、left、center、right
    positionX: 'center',//橫座標位置 top、left、center、right
    positionY: 'center',//縱座標位置 top、left、center、right
    width: null,//寬度
    speedIn: 300,//進入速度，以毫秒爲單位
    speedOut: 300,//消失速度，以毫秒爲單位
    delay: 150,//動畫延遲，以毫秒爲單位
    fullscreen: false,//設置全屏模式，默認false
    onOpen: null, //鉤子函數,彈窗打開時觸發
    onComplete: null,//鉤子函數,彈窗加載完成時觸發
    onClose: null,//鉤子函數,彈窗關閉時觸發
  }
});

其中 target 參數、effect 參數是較爲常用的參數，它們用來定義 Custombox 對象打開哪個彈框，以及使用什麼效果打開。其他參數都是輔助參數，可根據所需的動畫效果進行選擇。

另外三個比較重要的參數是onOpen 、onComplete 、onClose，分別定義了彈窗打開時觸發事件、彈窗加載完成時觸發事件、彈窗關閉時觸發事件，如果彈框交互複雜，這三個鉤子函數可以幫上大忙。

實例

使用Custombox實現上面Modal實現的功能

<!-- 彈框觸發按鈕 -->
<button class="btn btn-primary btn-lg" "custombox1()">
            打開custombox1
</button>

<div class="content" id="custombox1" style="display: none">
        <div class="modal-dialog" role="document">
            <div class="modal-content" style="width: 400px;height: 420px;">
                <div class="modal-header">
                    <h6 class="modal-title" id="custombox1Label">custombox1</h6>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <div class="alert alert-danger">點擊空白處退出</div>
                        </div>
                        <div class="form-group">
                            <div class="alert">這是custombox1！</div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- /.content -->
    </div>

通過按鈕觸發彈窗打開事件

function custombox1() {
        var custombox1 = new Custombox.modal({
            content: {
                effect: 'fadein',
                target: '#custombox1'
            }
        });
        custombox1.open();
    }

先寫到這裏，本文代碼都在這裏

常見的彈窗技術

1.BootStrap Modal模態框

2.Custombox

多線程之——深入理解Thread構造函數

dubbo快速啓動

合併兩個排序的鏈表

leetcode算法

重建二叉樹

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結