bootstrap modal填充数据_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)标题