Bootstrap 模态框(Modal)插件数据传值
原文:http://blog.csdn.net/baalhuo/article/details/51178154
模态框具体代码如下:
<!-- 模态框(Modal) -->
<div class="modal fade" id="update" 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">
学号:<input type="text" name="stuno" id="stuno" />
密码:<input type="text" name="pass" id="pass"/>
姓名:<input type="text" name="stuname" id="stuname"/>
性别:<input type="radio" name="sex" class="sex" id="man" value="男"/>男
<input type="radio" name="sex" class="sex" id="women" value="女"/>女
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="update()">提交更改</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal -->
</div>
<!-- 模态框(Modal)end -->
单击编辑图标时触发模态框,并将此行数据传入模态框。
传入后如下:
具体传值方法如下
//触发模态框的同时调用此方法
function editInfo(obj) {
var id = $(obj).attr("id");
//获取表格中的一行数据
var stuno = document.getElementById("table").rows[id].cells[].innerText;
var pass = document.getElementById("table").rows[id].cells[].innerText;
var name = document.getElementById("table").rows[id].cells[].innerText;
var sex = document.getElementById("table").rows[id].cells[].innerText;
//向模态框中传值
$('#stuno').val(stuno);
$('#pass').val(pass);
$('#stuname').val(name);
if (sex == '女') {
document.getElementById('women').checked = true;
} else {
document.getElementById('man').checked = true;
}
$('#update').modal('show');
}
//提交更改
function update() {
//获取模态框数据
var stuno = $('#stuno').val();
var pass = $('#pass').val();
var name = $('#stuname').val();
var sex = $('input:radio[name="sex"]:checked').val();
$.ajax({
type: "post",
url: "update.do",
data: "stuno=" + stuno + "&pass=" + pass + "&name=" + name + "&sex=" + sex,
dataType: 'html',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(result) {
//location.reload();
}
});
}
Bootstrap 模态框(Modal)插件数据传值的更多相关文章
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
- Bootstrap模态框modal的高度和宽度设置
(1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...
- 黄聪:bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案
一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }
- Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/ 自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$( ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- prometheus-简介及安装
监控是整个产品周期中最重要的一环,及时预警减少故障影响免扩大,而且能根据历史数据追溯问题. 对系统不间断实时监控 实时反馈系统当前状态 保证业务持续性运行 监控系统 监控方案 告警 特点 适用 Zab ...
- redis入门指南书中概要
一.简介 1.redis是一个开源的.高性能的.基于键值对的缓存和存储系统,通过提供多种键值数据类型适应不同场景下的缓存和存储需求,同时redis高级功能能胜任消息队列.任务队列等不同角色. 2.内存 ...
- 01_8_session
01_8_session 1. session总结 1.1服务器的一块内存(存key-value) 1.2和客户端窗口对应(子窗口)(独一无二) 1.3客户端和服务器有对应的SessionID 1.4 ...
- Clang提供的办法
1.方法弃用警告 #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarati ...
- 更改BootStrap popover的默认样式
.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padd ...
- 【贪心 哈夫曼树】bzoj2923: [Poi1998]The lightest language
失去了以前用STL乱搞的能力…… 题目描述 语言也是数学上经常研究的一种数据. 给出数学上关于语言的如下定义: 字母表:大小为 K 的字母表是一个由 K 不同的字符组成的集合. 单词:长度为 m 的单 ...
- ise与win8兼容解决方案
win8中ise无法加载code,显示impact4.exe停止运行. 解决方法如下: 找到程序安装路径 1.进入文件夹 D:\Xilinx\14.6\ISE_DS\ISE\lib\nt64 把li ...
- drf 视图功能
视图 drf提供的视图功能 自己的第一次封装 #一个功能写成一个类,方便组合,只要继承它就可以有这个功能 #将功能都写在一个类中,可控性就会变差 from book.myserializers imp ...
- Linux学习-延伸正则表达式
grep 默认仅支持基础正则表达式,如果要使用延伸型正则 表达式,你可以使用 grep -E , 不过更建议直接使用 egrep !直接区分指令比较好记忆!其 实 egrep 与 grep -E 是类 ...
- Linux学习-什么是进程 (process)
触发 任何一个事件时,系统都会将他定义成为一个进程,并且给予这个进程一个 ID ,称为 PID,同时依据启发这个进程的用户与相关属性关系,给予这个 PID 一组有效的权限设定.从此以后,这 个 PID ...