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)

实例一、简单弹框

一个静态的模态窗口实例，如下面的实例所示：

Bootstrap 实例 – 模态框(Modal)插件

// update表单

function update_info(id)

{

var id = id;

//复杂一点的json的另一种形式

var value2 = {“user_id”:”123456″,”username”:”coolcooldool”};

// $(‘input[name=username]’).removeAttr(“readonly”);//去除input元素的readonly属性

var obj2 = eval(value2);

// alert(obj2);

// 赋值

$(“#user_id”).val(obj2.user_id);

$(“#user_name”).val(obj2.username);

$(“#act”).val(“edit”);

// 将input元素设置为readonly

$(‘#user_id’).attr(“readonly”,”readonly”)

}

// 添加入库操作

function add_info()

{

var form_data = $(“#form_data”).serialize();

alert(form_data);

}

创建模态框(Modal)

添加

编辑

实例二、表单弹窗实现增删改功能

点击添加按钮，弹出添加表单框：

前端页面

user_list.html

用户列表

// 提交表单

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(“正在处理…“);

return true;

},

success:function(data)

{

if(data > 0)

{

alert(‘操作成功’);

$(“#tip”).html(“恭喜，删除成功！”);

// document.location.href=’world_system_notice.php’

location.reload();

}

else

{

$(“#tip”).html(“失败，请重试“);

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(“正在处理…“);

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(“失败，请重试“);

// 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(“正在处理…“);

return true;

},

success:function(data)

{

if(data > 0)

{

var msg = “添加”;

if(act == “edit”) msg = “编辑”;

$(“#tip”).html(“恭喜，” +msg+ “成功！”);

// document.location.href=’system_notice.php’

alert(msg + “OK！”);

location.reload();

}

else

{

$(“#tip”).html(“失败，请重试“);

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();

})

});

后台php页面action/user_action.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;