Bootstrap 使用對話框

時間 2019-11-21

原文原文鏈接

使用模態框的彈窗組件須要三層 div 容器元素javascript

分別爲 modal(模態聲明層) dialog(窗口聲明層) content(內容層)css

在內容層裏面,還有三層,分別爲 header(頭部) body(主體) footer(註腳)html

一個簡單的對話框登錄/註冊例子java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <style>
        .modal-dialog {
            width: 20%;
        }

        .modal-footer, .modal-header {
            text-align: center;
        }

        input {
            width: 80%;
        }

    </style>
</head>
<body>
    <!-- LOGIN MODULE -->
    <div id="loginModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">會員登陸</h4>
                </div>
                <div class="modal-body">
                    <label for="log_uname">
                        <span>賬號:</span>
                        <input id="log_uname" name="log_uname" type="text" placeholder="input your account">
                    </label>
                    <br>
                    <label for="log_passwd">
                        <span>密碼:</span>
                        <input id="log_passwd" name="log_passwd" type="password" placeholder="input your password">
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">登陸</button>
                    <button type="button" class="btn btn-warning" data-dismiss="modal">退出</button>
                </div>
            </div>
        </div>
    </div>

    <!-- LOGIN MODULE -->
    <div id="registerModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">註冊會員</h4>
                </div>
                <div class="modal-body">
                    <label for="uname">
                        <span>賬號:</span>
                        <input id="reg_uname" name="reg_uname" type="text" placeholder="input your account">
                    </label>
                    <br>
                    <label for="reg_passwd">
                        <span>密碼:</span>
                        <input id="reg_passwd" name="reg_passwd" type="password" placeholder="input your password">
                    </label>
                    <label for="reg_confirm_passwd">
                        <span>確認:</span>
                        <input id="reg_confirm_passwd" name="reg_confirm_passwd" type="password" placeholder="confirm your password">
                    </label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">註冊</button>
                    <button type="button" class="btn btn-warning" data-dismiss="modal">退出</button>
                </div>
            </div>
        </div>
    </div>

    <button class="btn btn-primary" data-toggle="modal" data-target="#loginModal">登錄</button>
    <button class="btn btn-warning" data-toggle="modal" data-target="#registerModal">註冊</button>
</body>
</html>

對話框其餘知識jquery

jQuery方式聲明對話框bootstrap

$('#myModal').modal({
    show : true,
    backdrop : false,
    keyboard : false,
    remote : 'index.html',
});

jQuery方式顯示對話框ide

$('#myBtn').on('click', function () {
    $('#myModal').modal('show');
});

對話框的事件動畫

show.bs.modal ==> 在show方法調用時當即觸發spa

shown.bs.modal ==> 在模態框徹底顯示出來而且CSS動畫完成以後觸發code

hide.bs.modal ==> 在hide方法調用時還未關閉隱藏時觸發

hidden.bs.modal ==> 在模態框徹底隱藏以後而且CSS動畫完成以後觸發

$('#myModal').on('show.bs.modal', function () {
    alert('show !');
});

邊緣彈出框

<button class="btn btn-lg btn-danger" type="button" data-toggle="popover"
    title="彈出框" data-content="這是一個彈出框">點擊彈出/隱藏彈出框</button>
<script>
    $('button').popover();
</script>

其餘方法

$('button').popover('show'); //顯示
$('button').popover('hide'); //隱藏
$('button').popover('toggle'); //反轉顯示和隱藏
$('button').popover('destroy'); //隱藏並銷燬

事件

show.bs.popover ==> 在調用show方法時觸發

shown.bs.popover ==> 在顯示整個彈窗時觸發

hide.bs.popover ===> 在調用hide方法時觸發

hidden.bs.popover ==> 在徹底關閉整個彈出時觸發

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。