纯html点击按钮弹出表单,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:
关闭
提交更改
实例⼆、表单弹窗实现增删改功能
点击添加按钮，弹出添加表单框：
前端页⾯
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' load();
}
else
htmlbutton属性{
$("#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(ark);
$("#act").val("edit");
// 将input元素设置为readonly
$('#user_id').attr("readonly","readonly")
// load();
}
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！");
}
else
{
$("#tip").html("失败，请重试");
alert('操作失败');
}
},
error:function()
{
alert('请求出错');
},
complete:function()
{
$('#acting_tips').hide();
}
});
return false;
}
$(function () { $('#addUserModal').on('dal', function () {
// 关闭时清空edit状态为add
$("#act").val("add");
})
});
⽤户列表
⽤户ID：合计条件⽤户：添加⽤户

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。