php 模态框 form表单,Bootstrap使用模态框modal实现表单提交弹出框

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)

添加

编辑

×

模态框(Modal)标题

user_id:

name:

关闭

提交更改

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

image.png

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

image.png

前端页面

user_list.html

用户列表

// 提交表单

function delete_info(id)

{

if(!id)

{

alert('Error！');

return false;

}

// var form_data = new Array();

$.ajax(

{

url: "action/user_action",

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",

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",

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

})

});

用户列表

用户ID：	合计条件用户：	添加用户
默认

总数({total_count})

用户id用户名地址备注操作

{user_id}{name}{address}{remark}

编辑

删除

{page_str}       

×

用户信息

用户ID

placeholder="请输入用户ID">

用户名

placeholder="用户名">

地址

placeholder="地址">

备注

placeholder="备注">

关闭

提交