bootstrap js 觸發模態框案例
阿新 • • 發佈：2019-02-15
示例程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 例項 - 模態框（Modal）外掛</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>建立模態框（Modal）</h2>
<!-- 按鈕觸發模態框 -->
<a href="javascript:void(-1);" onclick="show_modal();"> 開始演示模態框</a>
</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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模態框（Modal）標題
</h4>
</div>
<div class="modal-body">
<div class="input-group">
<div class="form-group">
<label>name:</label>
<input name="name" type="text" value="">
</div>
</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="id_ad_search">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script>
function show_modal() {
$('#myModal').modal('show');
}
$(function () {
$('#id_ad_search').click(function () {
var name = $('#id_name').val();
$.ajax({
url:'/test',
data:{name:name},
complete:function () {
$('#myModal').modal('hide');
}
})
});
});
</script>
</body>
</html>