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)
實例一、簡單彈框
一個靜態的模態窗口實例，如下面的實例所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 模態框（Modal）插件</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <script> // 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); } </script <body> <h2>創建模態框（Modal）</h2> <!-- 按鈕觸發模態框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 添加 </button> <button class="btn btn-primary btn-lg" onclick="update_info(8)" data-toggle="modal" data-target="#myModal"> 編輯 </button> <!-- 模態框（Modal） --> <div class="modal fade" id="myModal" 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"> 模態框（Modal）標題 </h4> </div> <form id="form_data"> <div class="modal-body"> user_id: <input type="text" id="user_id" name="user_id"/> name: <input type="text" id="user_name" name="user_name"/> <input type="hidden" id="act" value="add" name="act"/> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button> <button type="button" onclick="add_info()" class="btn btn-primary"> 提交更改 </button> </div> </form> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html>
實例二、表單彈窗實現增刪改功能
點擊添加按鈕，彈出添加表單框：
前端頁面
user_list.html
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>用戶列表</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <script> // 提交表單 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("<span style='color:blue'>正在處理...</span>"); return true; }, success:function(data) { if(data > 0) { alert('操作成功'); $("#tip").html("<span style='color:blueviolet'>恭喜，刪除成功！</span>"); // document.location.href='world_system_notice.php' location.reload(); } else { $("#tip").html("<span style='color:red'>失敗，請重試</span>"); 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("<span style='color:blue'>正在處理...</span>"); 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("<span style='color:red'>失敗，請重試</span>"); // 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("<span style='color:blue'>正在處理...</span>"); return true; }, success:function(data) { if(data > 0) { var msg = "添加"; if(act == "edit") msg = "編輯"; $("#tip").html("<span style='color:blueviolet'>恭喜，" +msg+ "成功！</span>"); // document.location.href='system_notice.php' alert(msg + "OK！"); location.reload(); } else { $("#tip").html("<span style='color:red'>失敗，請重試</span>"); 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(); }) }); </script> <body> <div class="container" style="min-width: 1200px;"> <h1> 用戶列表 </h1> <form action="extreme_award_user_list.php" method="post" class="form"> <table class="table table-bordered"> <tbody> <tr> <td>用戶ID：<input type="text" name="search_user_id" value="{search_user_id}"></td> <td>合計條件用戶： <input type="text" name="search_total" value="{search_total}"></td> <td> <!-- 按鈕觸發模態框 --> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addUserModal"> 添加用戶 </button> </td> </tr> <tr> <td colspan="10" style=" text-align: center; padding: 10px; border: none"> <input type="submit" class="btn btn-default" value="搜索" /> <a href="extreme_award_user_list.php">默認</a> </td> </tr> </tbody> </table> </form> 總數（<b>{total_count}</b>） <table class="table table-hover table-bordered" > <thead> <tr> <th>用戶id</th> <th>用戶名</th> <th>地址</th> <th>備注</th> <th>操作</th> </tr> </thead> <tbody> <!-- BEGIN list --> <tr> <td>{user_id}</td> <td>{name}</td> <td>{address}</td> <td>{remark}</td> <td> <button type="button" class="btn btn-info" data-toggle="modal" onclick="return get_edit_info({user_id})" data-target="#addUserModal">編輯</button> <button type="button" class="btn btn-danger" onclick="return delete_info({id})">刪除</button> </td> </tr> <!-- END list --> </tbody> </table> {page_str} <!-- 模態框示例（Modal） --> <form method="post" action="" class="form-horizontal" role="form" id="form_data" onsubmit="return check_form()" style="margin: 20px;"> <div class="modal fade" id="addUserModal" 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"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="user_id" class="col-sm-3 control-label">用戶ID</label> <div class="col-sm-9"> <input type="text" class="form-control" id="user_id" name="user_id" value="{user_id}" placeholder="請輸入用戶ID"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">用戶名</label> <div class="col-sm-9"> <input type="text" class="form-control" name="user_name" value="" id="user_name" placeholder="用戶名"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">地址</label> <div class="col-sm-9"> <input type="text" class="form-control" name="address" value="" id="address" placeholder="地址"> </div> </div> <div class="form-group"> <label for="remark" class="col-sm-3 control-label">備注</label> <div class="col-sm-9"> <textarea class="form-control" name="remark" value="{remark}" id="remark" placeholder="備注"> </textarea> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button> <button type="submit" class="btn btn-primary"> 提交 </button><span id="tip"> </span> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </form> </div> </body> </html>
后台php頁面action/user_action.php
<?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
-----------------------------------------------自己項目實踐------------------------------------------------------------------
<!DOCTYPE html> <html> <head> <title>{$page.post_title}</title> <meta name="keywords" content="{$page.post_keywords}"/> <meta name="description" content="{$page.post_excerpt}"> <include file="public@head"/> <style> #article_content img { height: auto !important; max-width: 100%; } </style> <hook name="before_head_end"/> </head> <body class="body-white"> <include file="public@nav"/> <div class="container tc-main"> <div class="row"> <div class="col-md-9"> <div class="tc-box article-box"> <h2>{$page.post_title|default=''}</h2> <hr> <div id="article_content"> <form class="form-horizontal" method="post" action="{:url('user/login/forum')}"> <div class="form-group"> <label class="col-sm-2 control-label">用戶名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="name" placeholder="用戶名" required> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">電話 </label> <div class="col-sm-10"> <input type="text" class="form-control" name="phone" placeholder="電話" required> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">郵箱</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email" required> </div> </div> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">內容</label> <div class="col-sm-10"> <textarea class="form-control" rows="3" name="content" required></textarea> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">提交留言</button> </div> </div> </form> </div> </div> <volist name="forum_info" id="item"> <div class="media" style="width: 100%;height: 100%;position: relative;"> <div class="media-left"> <a href="#"> <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="{$item.img_src}" data-holder-rendered="true" style="width: 64px; height: 64px;"> </a> </div> <div class="media-body"> <h4 class="media-heading">{$item.name} </h4> <p>{$item.content} </p> <p >{$item.create_time} </p> <!--<button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" style="right: 7%;position: absolute;top: 66%;cursor:pointer;background-color: #428bca;border-color:#428bca">回復</button>--> <p style="right: 7%;position: absolute;top: 32%;cursor:pointer;color: #428bca;" data-toggle="modal" data-target="#exampleModal{$item['id']}">回復</p> <volist name="luntan_info" id="luntan_info_item"> <if condition="$item.id eq $luntan_info_item.send_invitation_user_id"> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object " data-src="holder.js/64x64" alt="64x64" src="{$luntan_info_item.replay_img}" data-holder-rendered="true" style="width: 64px; height: 64px;"> </a> </div> <div class="media-body"> <h4 class="media-heading">{$luntan_info_item.replay_phone_jm}</h4> <p>{$luntan_info_item.content}</p> <p>{$luntan_info_item.create_time}</p> </div> </div> <else /> </if> </volist> </div> </div> <div class="modal fade" id="exampleModal{$item['id']}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!--<div class="modal-header">--> <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>--> <!--<h4 class="modal-title" id="exampleModalLabel">New message</h4>--> <!--</div>--> <div class="modal-body"> <form > <!--<div class="form-group">--> <!--<label for="recipient-name" class="control-label">Recipient:</label>--> <!--<input type="text" class="form-control" id="recipient-name">--> <!--</div>--> <input type="hidden" name="id{$item['id']}" id="item_id" value="{$item['id']}" > <div class="form-group"> <label for="message-text" class="control-label">內容:</label> <textarea class="form-control" id="message-text{$item['id']}" name="content"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary" onclick="check_form({$item['id']})">提交</button> <span id="tip"> </span> </div> </div> </div> </div> </volist> </div> <div class="col-md-3"> <widget name="hottest_articles"> <div class="tc-box"> <div class="headtitle"> <h2>{$widget.title}</h2> </div> <div class="ranking"> <php> $hot_articles=[]; </php> <ul class="list-unstyled"> <portal:articles limit="5" order="post.post_hits DESC" categoryIds="$widget.vars.hottest_articles_category_id"> <php>$top=$key<3?"top3":"";</php> <li class="{$top}"> <i>{$key+1}</i> <a title="{$vo.post_title}" href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}"> {$vo.post_title} </a> </li> </portal:articles> </ul> </div> </div> </widget> <widget name="last_articles"> <div class="tc-box"> <div class="headtitle"> <h2>{$widget.title}</h2> </div> <div class="posts"> <portal:articles limit="5" order="post.published_time DESC" categoryIds="$widget.vars.last_articles_category_id"> <dl class="dl-horizontal"> <dt> <a class="img-wraper" href="{:cmf_url('portal/Article/index',array('id'=>$vo.id))}"> <if condition="empty($vo.more.thumbnail)"> <img src="__TMPL__/public/assets/images/default_tupian4.png" class="img-responsive" alt="{$vo.post_title}"/> <else/> <img src="{:cmf_get_image_url($vo.more.thumbnail)}" class="img-responsive" alt="{$vo.post_title}"/> </if> </a> </dt> <dd> <a href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}">{$vo.post_title}</a> </dd> </dl> </portal:articles> </div> </div> </widget> </div> </div> <include file="public@footer"/> </div> <script> $('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // Button that triggered the modal var recipient = button.data('whatever') // Extract info from data-* attributes // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) modal.find('.modal-title').text('New message to ' + recipient); modal.find('.modal-body input').val(recipient) }) function update_info(id){ console.log(id); $("input[type=hidden]").val(id) ; } function check_form(id){ var content = $("#message-text" + id).val(); // var id = $("input[name='id']").attr('id'); console.log(id); console.log(content); if(!content) { alert('內容不能為空！'); return false; } $.ajax( { url: "{:url('user/login/forum_building')}", data:{"content":content,"user_id":id}, type: "post", beforeSend:function() { //$("#tip").html("<span style='color:blue'>正在處理...</span>"); return true; }, success:function(data) { if(data.code == 1) { alert('請先登錄！'); document.location.href='/user/login/index'; // var msg = "添加"; // if(act == "edit") msg = "編輯"; //$("#tip").html("<span style='color:blueviolet'>回復成功！</span>"); // // document.location.href='system_notice.php' } else if(data.code == 3) { //$("#tip").html("<span style='color:red'>失敗，請重試</span>"); alert('回復成功！'); //console.log(data.data); location.reload(); }else if(data.code == 4){ alert('回復次數已受限制！'); //console.log(data.data); location.reload(); }else { } }, error:function() { alert('請求出錯'); }, complete:function() { // $('#acting_tips').hide(); } }); return false; } </script> <include file="public@scripts"/> <hook name="before_body_end"/> </body> </html>