Bootstrap-JS插件模态对话框
Bootstrap--JS插件模态对话框
http://v2.bootcss.com/javascript.html#modals
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object.
.modal('toggle')
手动打开或隐藏一个模态对话框。
.modal('show')
手动打开一个模态对话框。
.modal('hide')
手动隐藏一个模态对话框。
http://v2.bootcss.com/javascript.html#modals
方法
.modal(options)
让你指定的内容变成一个模态对话框。接受一个可选的参数object.
$('#myModal').modal({keyboard: false})
.modal('toggle')
手动打开或隐藏一个模态对话框。
$('#myModal').modal('toggle')
.modal('show')
手动打开一个模态对话框。
$('#myModal').modal('show')
.modal('hide')
手动隐藏一个模态对话框。
$('#myModal').modal('hide')
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap Model</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<!--<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-modal.js"></script>-->
<script>
$(document).ready(function() {
$('#windowTitleDialog').bind('show', function () {
document.getElementById ("xlInput").value = document.title;
});
});
function closeDialog () {
$('#windowTitleDialog').modal('hide');
};
function okClicked () {
document.title = document.getElementById ("xlInput").value;
closeDialog ();
};
function openDialog(){
$('#windowTitleDialog').modal('show');
};
</script>
</head>
<body>
<div id="windowTitleDialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel" aria-hidden="true">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">×</a>
<h3>请给窗口重新命名</h3>
</div>
<div class="modal-body">
<div class="divDialogElements">
<input class="xlarge" id="xlInput" name="xlInput" type="text" />
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" onclick="closeDialog ();">Cancel</a>
<a href="#" class="btn btn-primary" onclick="okClicked ();">OK</a>
</div>
</div>
<!--主控元素上设置data-toggle="modal"，再设置data-target="#foo" 或href="#foo" 用以指向某个将要被启动的对话框的id-->
<div class="divButtons">
<!--a标签添加href="#windowTitleDialog"可以弹出弹窗，或者可以通过a标签cilck事件调用封装的openDialog()方法实现-->
<a data-toggle="modal" href="#windowTitleDialog" class="btn btn-primary btn-large" onclick="openDialog()">设置窗口名称</a>
</div>
</body>
</html>
效果如下：页面title由“Bootstrap Model”变成了“Bootstrap Model example”