bootstrap使用modal-dialog實現彈對話框。
一個對話框包含3部分：
對話框頭部 modal-header
對話框內容體 modal-body
對話框底部 modal-footer
如下html可以放入<body>標簽的任何位置，我習慣緊隨<body>標簽之后。
html代碼片段：
<div class="modal fade" id="loginModalId" 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"> <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> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" class="btn btn-primary" id="loginModalYesId">登錄</button> </div> </div> </div> </div>
默認div是隱藏的 aria-hidden="true"
顯示效果：
增加一個觸發彈出對話框的按鈕。
<button type="button" class="btn btn-blue nav-external animated hiding" id="loginBntId" hidden="true">點擊登錄...</button>
增加js代碼，當按鈕loginBtnId按下時，顯示對話框（$('#loginModalId').modal('show');）。
$(document).ready(function() {
document.getElementById("loginBntId").onclick = function() {
$('#loginModalId').modal('show');
}
document.getElementById("loginModalYesId").onclick = function() {
$('#loginModalId').modal('hide');
alert("登錄功能未實現！");
}
});
為對話框上的 登錄 按鈕增加點擊事件，事件發生后隱藏對話框（$('#loginModalId').modal('hide');），並觸發登錄操作（"登錄功能未實現！"）
參考：
http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html?from=androidqq