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); } 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(); }) }); 用户列表 用户ID： 合计条件用户： 添加用户 ;;默认 总数（{total_count}） 用户id 用户名 地址 备注 操作 {user_id} {name} {address} {remark} 编辑 ;; 删除 {page_str} ;;;;;; × 用户信息 用户ID 用户名 地址 备注 关闭 提交后台php页面action/user_action.php |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |