Bootstrap 模態框（Modal）插件
模態框（Modal）是覆蓋在父窗體上的子窗體。通常，目的是顯示來自一個單獨的源的內容，可以在不離開父窗體的情況下有一些互動。子窗體可提供信息、交互等。
如果您想要單獨引用該插件的功能，那么您需要引用 modal.js。或者，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。
用法
您可以切換模態框（Modal）插件的隱藏內容：
通過 data 屬性：在控制器元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）。
通過 JavaScript：使用這種技術，您可以通過簡單的一行 JavaScript 來調用帶有 id="identifier" 的模態框：
$('#identifier').modal(options)
實例一、簡單彈框
一個靜態的模態窗口實例，如下面的實例所示：
<!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> <script>
實例二、表單彈窗實現增刪改功能
點擊添加按鈕，彈出添加表單框：
前端頁面
user_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>用戶列表</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script>
// 提交表單
function delete_info(id)
{
if(!id)
{
alert('Error！');
return false;
}
// var form_data = new Array();
$.ajax(
{
url: "action/user_action.php",
data:{"id":id, "act":"del"},
type: "post",
beforeSend:function()
{
$("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success:function(data)
{
if(data > 0)
{
alert('操作成功');
$("#tip").html("<span style='color:blueviolet'>恭喜，刪除成功！</span>");
// document.location.href='world_system_notice.php'
location.reload();
}
else
{
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
alert('操作失敗');
}
},
error:function()
{
alert('請求出錯');
},
complete:function()
{
// $('#tips').hide();
}
});
return false;
}
// 編輯表單
function get_edit_info(user_id)
{
if(!user_id)
{
alert('Error！');
return false;
}
// var form_data = new Array();
$.ajax(
{
url: "action/user_action.php",
data:{"user_id":user_id, "act":"get"},
type: "post",
beforeSend:function()
{
// $("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success:function(data)
{
if(data)
{
// 解析json數據
var data = data;
var data_obj = eval("("+data+")");
// 賦值
$("#user_id").val(data_obj.user_id);
$("#name").val(data_obj.name);
$("#address").val(data_obj.address);
$("#remark").val(data_obj.remark);
$("#act").val("edit");
// 將input元素設置為readonly
$('#user_id').attr("readonly","readonly")
// location.reload();
}
else
{
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
// alert('操作失敗');
}
},
error:function()
{
alert('請求出錯');
},
complete:function()
{
// $('#tips').hide();
}
});
return false;
}
// 提交表單
function check_form()
{
var user_id = $.trim($('#user_id').val());
var act = $.trim($('#act').val());
if(!user_id)
{
alert('用戶ID不能為空！');
return false;
}
var form_data = $('#form_data').serialize();
// 異步提交數據到action/add_action.php頁面
$.ajax(
{
url: "action/user_action.php",
data:{"form_data":form_data,"act":act},
type: "post",
beforeSend:function()
{
$("#tip").html("<span style='color:blue'>正在處理...</span>");
return true;
},
success:function(data)
{
if(data > 0)
{
var msg = "添加";
if(act == "edit") msg = "編輯";
$("#tip").html("<span style='color:blueviolet'>恭喜，" +msg+ "成功！</span>");
// document.location.href='system_notice.php'
alert(msg + "OK！");
location.reload();
}
else
{
$("#tip").html("<span style='color:red'>失敗，請重試</span>");
alert('操作失敗');
}
},
error:function()
{
alert('請求出錯');
},
complete:function()
{
$('#acting_tips').hide();
}
});
return false;
}
$(function () { $('#addUserModal').on('hide.bs.modal', function () {
// 關閉時清空edit狀態為add
$("#act").val("add");
location.reload();
})
});
</script>
<body>
<div class="container" style="min-width: 1200px;">
<h1>
用戶列表
</h1>
<form action="extreme_award_user_list.php" method="post" class="form">
<table class="table table-bordered">
<tbody>
<tr>
<td>用戶ID：<input type="text" name="search_user_id" value="{search_user_id}"></td>
<td>合計條件用戶： <input type="text" name="search_total" value="{search_total}"></td>
<td> <!-- 按鈕觸發模態框 -->
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addUserModal">
添加用戶
</button>
</td>
</tr>
<tr>
<td colspan="10" style=" text-align: center; padding: 10px; border: none">
<input type="submit" class="btn btn-default" value="搜索" /> <a href="extreme_award_user_list.php">默認</a>
</td>
</tr>
</tbody>
</table>
</form>
總數（<b>{total_count}</b>）
<table class="table table-hover table-bordered" >
<thead>
<tr>
<th>用戶id</th>
<th>用戶名</th>
<th>地址</th>
<th>備注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- BEGIN list -->
<tr>
<td>{user_id}</td>
<td>{name}</td>
<td>{address}</td>
<td>{remark}</td>
<td>
<button type="button" class="btn btn-info" data-toggle="modal" onclick="return get_edit_info({user_id})" data-target="#addUserModal">編輯</button>
<button type="button" class="btn btn-danger" onclick="return delete_info({id})">刪除</button>
</td>
</tr>
<!-- END list -->
</tbody>
</table>
{page_str}
<!-- 模態框示例（Modal） -->
<form method="post" action="" class="form-horizontal" role="form" id="form_data" onsubmit="return check_form()" style="margin: 20px;">
<div class="modal fade" id="addUserModal" 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">
用戶信息
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="user_id" class="col-sm-3 control-label">用戶ID</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="user_id" name="user_id" value="{user_id}"
placeholder="請輸入用戶ID">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">用戶名</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="user_name" value="" id="user_name"
placeholder="用戶名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-3 control-label">地址</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="address" value="" id="address"
placeholder="地址">
</div>
</div>
<div class="form-group">
<label for="remark" class="col-sm-3 control-label">備注</label>
<div class="col-sm-9">
<textarea class="form-control" name="remark" value="{remark}" id="remark"
placeholder="備注">
</textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉
</button>
<button type="submit" class="btn btn-primary">
提交
</button><span id="tip"> </span>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</form>
</div>
</body>
</html>
后台php頁面action/user_action.php
<?php /** * 獲取提交的數據 * */ $act = $_POST['act']; $id = $_POST['id']; $user_id = (int)$_POST['user_id']; $form_data = $_POST['form_data']; $param_arr = array(); // 獲取到的數據格式為 “foo=bar&baz=boom&cow=milk&php=hypertext+processor” // http_build_query 的數據形式用parse_str解析為數組格式 parse_str($form_data, $param_arr); // 備注中文處理 $param_arr['remark'] = iconv("utf-8", "gbk", trim($param_arr['remark'])); switch($act) { case "add": // 添加入庫操作 // ... // ... break; case "edit": // 編輯操作 $user_id = $param_arr['user_id']; // ... break; case "get": // 返回詳細的用戶信息 // get($user_id); echo $ret; exit(); break; case "del": // 刪除 // delete(); break; } echo $ret > 0 ? 1 : 0; 相關文章：
bootstrap中的模態框（modal，彈出層）
鏈接描述
https://segmentfault.com/a/1190000007651357