點擊按鈕彈出彈窗（bootstrap）

一、效果如下

二、代碼如下

（一）js代碼

<link rel="stylesheet"
    href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
    src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        document.getElementById("BntId").onclick = function() {
            $('#ModalId').modal('show');
        }
        document.getElementById("ModalYesId").onclick = function() {
            $('#ModalId').modal('hide');
            alert("登錄功能未實現！");
        }
    });
</script>

（二）彈窗代碼

    <!-- 文件信息展示-彈窗 -->
    <div class="modal fade" id="ModalId" tabindex="-1" role="dialog"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×</button>
                    <h4 class="modal-title" id="myModalLabel">登錄</h4>
                </div>
                <div class="modal-body">
                <!-- 內容主體begin -->
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon3">帳號：</span> <input
                            type="text" class="input-sm" id="loginUser"
                            aria-describedby="basic-addon3" placeholder="admin">
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" id="basic-addon3">密碼：</span> <input
                            type="password" class="input-sm" id="loginPassword"
                            aria-describedby="basic-addon3" placeholder="******">
                    </div>
                <!-- 內容主體end -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="ModalYesId">登錄</button>
                </div>
            </div>
        </div>
    </div>

（三）按鈕代碼

<button type="button" class="btn btn-primary" id="BntId" hidden="true">查看詳情</button>

參考鏈接：https://www.cnblogs.com/voipman/p/5070867.html