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;

https://segmentfault.com/a/1190000007651357

amazeUI表单提交验证--input框required

效果: html:

&lt ...

bootstrap 弹出框点击其他区域时弹出框不消失选项设置

默认情况下,bootstrap 弹出框点击其他区域时,弹出框会自动关闭,在很多时候,我们可能会希望达到和原生弹出框一样的效果,避免不小心点击其他区域时弹框自动隐藏,尤其是对于一些复杂的表单,重复填写可 ...

微信小程序开发4之form表单与弹出层

第一 表单的提交和重置 第二 radio组件 第三 checkbox组件 第四 loading组件 第五 toast组件 第六 modal组件

表单提交复选框(checkbox)注意事项

例子:

浅谈 form 表单提交

原创文章,转载请注明出处:http://www.cnblogs.com/weix-l/p/7675230.html 若有错误,请评论指出,谢谢! Form 对象代表一个 HTML 表单.在 HTML ...

随机推荐

一个iOS 框架介绍：MKNetworkKit

http://blog.csdn.net/kmyhy/article/details/12276287 http://blog.csdn.net/mobailwang/article/details/ ...

Java-Android 之Hello World

1.新建一个Android Project 2.2版本的 修改values下面的内容,为: <?xml version="1.0" encoding="utf-8& ...

Apple Watch视频教程(连载)

发展Apple Watch 必须Xcode 6.2上述号码,所有视频.课件.Demo须要的能够加我私人微信 wanghj29(扫描头像也能够),在微信里面给我发email,我都发过去,另外也提供在线播 ...

PKU 1276 Cash Machine

/* Cash Machine Time Limit: 1000MS Memory Limit: 10000K ...

POST和GET的详细解释以及区别

Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

&lbrack;jzoj&rsqb;2938&period;【NOIP2012模拟8&period;9】分割田地

Link https://jzoj.net/senior/#main/show/2938 Description 地主某君有一块由2×n个栅格组成的土地,有k个儿子,现在地主快要终老了,要把这些土地分 ...

C语言-用函数实现社保工资查询系统

需求: 1.有登陆操作,超过三次需重新打开登录 2.查询五险一金.税前税后工资计算,个人与单位应缴明细 3.输入税后工资和税前工资都可查询 4.退出有询问确认操作 代码如下; #include< ...

WebSphere MQ中的CCSID

CCSID是一个字符集的标识.作为unicode标准通过定义一个字符集内每个字符要对应那个数字值的方式定义了一个字符集.这说明CCSID就是一个定义字符集顺序的标识数码罢了.IBM的字符标识架构在文档 ...

LeetCode翻转矩阵后的得分-Python3&lt&semi;六&gt&semi;

上一篇:LeetCode子域名访问计数-Python3.7 题目:https://leetcode-cn.com/problems/score-after-flipping-matr ...

JavaScript的类、对象、原型、继承、引用

以CSS为例,有一种为所有class为"xxxx"的元素添加样式(外联样式),那么所有class为xxx的元素样式就会改变,在css中像下面这么写: &l ...