Bootstrap模态对话框：动态载入内容

Bootstrap实现模态框Bootstrap实现模态框什么是模态框模态框就是覆盖在⽗窗体上的⽗窗体，有点像弹出框，只不过这个弹出框是⽗⽗做出来的，可以显⽗⽗⽗设置的内容。

模态框的常⽗事件⽗的事件实例调⽗show ⽗法后触发show.bs.modal$("#myModel").on(‘show.bs.modal’,function () {//执⽗的操作})模态框对⽗户可见时触发shown.bs.modal$("#myModel").on(‘shown.bs.modal’,function () {//执⽗的操作})调⽗hide 实例⽗法时触发hide.bs.modal$("#myModel").on(‘hide.bs.modal’,function () {//执⽗的操作})模态框完全对⽗户隐藏时触发hidden.bs.modal$("#myModel").on('hidden.bs.modal ',function () {//执⽗的操作})实现触发模态框的按钮<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModel">模态</button> 这个按钮其实可以是button,也可以是任意的其他标签，只要data-toggle、data-target对应就可以，例如使⽗a标签<a data-toggle="modal" data-target="#myModel"> 查看照⽗</a> 模态框的设计<!--模态框--><div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content" id="content"><img src="../车体2.png" /></div></div></div>触发模态框$("#myModel").on('show.bs.modal',function () { alert("进来了");})。

bootstraptable动态加载数据⽰例代码我最近在研究bootstrap的学习路上，那么今天也算个学习笔记吧！效果如下：点击选择按钮，弹出模态框，加载出关键词列表TABLE样式：<div class="modal fade " id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button onclick="colseClickModal()" class="close" type="button" data-dismiss="modal">×</button> <h2 id="myModalLabel">关键词表</h2></div><div class="modal-body" style="height:310px"><table class="table table-hover"id="ClickTable" ><thead><tr><th id="gjc" data-field="ID" data-sortable="true">关键词 <a style="color:red">(双击选择)</a></th><th data-field="REQUESTCONETENT" >请求内容</th></tr></thead></table></div><div class="modal-footer"><a href="JavaScript:void(0)" rel="external nofollow" onclick="colseClickModal()" class="btn">关闭</a></div></div></div></div>JAVASCRIPT脚本：function chooseBtn1(){$.ajax({type:"POST",url:'wxgl/findKey',success:function(data){var dataJson = eval('(' + data + ')');var datalist = dataJson.keys;$('#ClickTable').bootstrapTable('destroy').bootstrapTable({ //'destroy' 是必须要加的==作⽤是加载服务器// //数据，初始化表格的内容Destroy the bootstrap table. data:datalist, //datalist 即为需要的数据dataType:'json',data_locale:"zh-US", //转换中⽂但是没有什么⽤处pagination: true,pageList:[],pageNumber:1,pageSize:5,//每页显⽰的数量paginationPreText:"上⼀页",paginationNextText:"下⼀页",paginationLoop:false,//这⾥也可以将TABLE样式中的<tr>标签⾥的内容挪到这⾥⾯：columns: [{checkbox: true},{field: 'ID',title:'关键词 ',valign: 'middle',},{field: 'REQUESTCONETENT',title:'请求内容'}]onDblClickCell: function (field, value,row,td) {console.log(row);$('#msgId').val(row.ID);$('#ClickModal').modal('hide');}});$('#ClickModal').modal('show');},error:function(data){Modal.confirm({title:'提⽰',msg:"刷新数据失败!"});}})}在脚本中调⽤的findKey⽅法:@RequestMapping(value="findKey")@ResponseBodypublic void findKey(HttpServletResponse response,HttpServletRequest request) throws IOException{List<Key> keys = null;keys=menuService.findKey(wxid);Map<String, Object> jsonMap = new HashMap<String, Object>();// 定义mapjsonMap.put("keys", keys);// rows键存放每页记录 listJSONObject result = JSONObject.fromObject(jsonMap);// 格式化resultresponse.setContentType("text/html;charset=utf-8");PrintWriter writer = response.getWriter();writer.write(result.toString());writer.flush();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

bootstrap 使用方法
Bootstrap是一种流行的前端开发框架，可以帮助开发者快速构建响应式和移动优先的网站。

以下是Bootstrap的使用方法：
1. 安装Bootstrap：可以通过下载压缩包或使用包管理器（如npm或yarn）来安装Bootstrap。

安装完成后，将Bootstrap的CSS和JavaScript文件
引入到HTML文件中。

2. 创建HTML骨架结构：先正常搭建一个HTML页面，然后根据需要选择Bootstrap提供的组件，将其复制到HTML页面中。

3. 引入相关样式文件：使用link标签引入Bootstrap的CSS文件。

也可以通过Sass工具对Bootstrap进行深度定制。

4. 书写内容：正常输入内容，如果发现内容没有了浏览器默认的内外边距，则证明CSS文件引入成功。

5. 利用Bootstrap组件：Bootstrap提供的组件不仅减少了开发工作量，
而且统一了设计风格。

例如，可以使用Navbar组件创建导航菜单，使用模态框创建对话框，使用Carousel组件添加动态轮播图等。

总之，使用Bootstrap可以快速构建出美观、响应式的网站，提高开发效率。

如需了解更多关于Bootstrap的使用方法，建议访问相关社区或论坛，或参考官方文档。

Bootstrap模态框模态框（Modal）是覆盖在⽗窗体上的⼦窗体。

通常，⽬的是显⽰来⾃⼀个单独的源的内容，可以在不离开⽗窗体的情况下有⼀些互动。

⼦窗体可提供信息、交互等。

（1）提供信息、警告信息、⼤⽂本； （2）确认按钮（多按钮）； （3）显⽰表单元素；（⼀般⽤Ajax操作等功能） （4）其他需要特殊显⽰的信息（如单击缩略图时放⼤图⽚）；1 <div class="modal show">2 <div class="modal-dialog">3 <div class="modal-content">4 <div class="modal-header">5 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>6 <h4 class="modal-title">标题</h4>7 </div>8 <div class="modal-body">9 <p>这⾥是弹窗的具体内容......&hellip;</p>10 </div>11 <div class="modal-footer">12 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>13 <button type="button" class="btn btn-primary">保存</button>14 </div>15 </div>16 </div>17 </div> 这个是静态的页⾯，直接显⽰在屏幕上；接下来，我们来看⼀下按钮触发模态框；1 <h2>创建模态框</h2>2 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演⽰模态框</button>3 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">4 <div class="modal-dialog">5 <div class="modal-content">6 <div class="modal-header">7 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>8 <h4 class="modal-title">标题</h4>9 </div>10 <div class="modal-body">11 <p>这⾥是弹窗的具体内容......&hellip;</p>12 </div>13 <div class="modal-footer">14 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>15 <button type="button" class="btn btn-primary">保存</button>16 </div>17 </div>18 </div>19 </div> 点击按钮则弹出模态框；⽤法您可以切换模态框（Modal）插件的隐藏内容： 通过 data 属性：在控制器元素（⽐如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier"（标识符）或href="#identifier"（标识符）来指定要切换的特定的模态框（带有 id="identifier"）。

tp3.2和Bootstrap模态框导⼊excel表格数据导⼊按钮<button class="btn btn-info" type="button" id="import" data-toggle="modal" data-target="#myModal">导⼊</button>模态框<!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><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">&times;</span></button> <h4 class="modal-title" id="myModalLabel">导⼊</h4></div><div class="modal-body"><div>导⼊格式如下</div><table class="table table-bordered"><tr><th>编号</th><th>姓名</th><th>⼿机号</th><th>性别</th><th>出⽣⽇期</th></tr><tr><td>1</td><td>⼩李</td><td>188********</td><td>男</td><td>2013年12⽉20⽇</td></tr></table><form action="#" method="post" id="file-form" enctype="multipart/form-data"><div class="form-group"><label class=" control-label" style="width:85px;">上传⽂件^*</label><div class=""><input type="file" name="excel" style="display:block;"/></div></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal" id="file-import">确定</button><!--<button type="button" class="btn btn-danger" id="editUser">确定</button>--></div></div></div></div>弹出模态框，选择⽂件，点击确定//导⼊$('#file-import').on('click',function(){var fileFlag = false;fileFlag = $("input[name='excel']").val();if(!fileFlag) {alert( '请选择⽂件！');return false;}// 创建var form_data = new FormData();// 获取⽂件var file_data = $("input[name='excel']").prop("files")[0];// 把所以表单信息form_data.append("excel", file_data);$.ajax({url:'/Admin/import',type:'post',dataType:'json',processData: false, // 注意：让jQuery不要处理数据contentType: false, // 注意：让jQuery不要设置contentTypedata: form_data,success:function(info){console.log(info);alert(info.msg);if(info.code == 1){window.location.reload();}}})});PHP控制器/*** 导⼊*/public function import(){$name = substr(strrchr($_FILES['excel']['name'], '.'), 1);$file = $_FILES['excel']['tmp_name'];$data = $this->excel($name,$file);if(!$data){return$this->ajaxReturn(['code'=>-1,'msg'=>'⽂件格式不正确！']);}foreach($data as &$v){$dateArr = date_parse_from_format('Y年m⽉d⽇',$v['time']);if(!$dateArr['year']){$v['time'] = '';continue;}$v['time'] = $dateArr['year'].'-'.$dateArr['month'].'-'.$dateArr['day'];}$allID = M('user')->addAll($data);if($allID){return$this->ajaxReturn(['code'=>1,'msg'=>'导⼊成功']);}$this->ajaxReturn(['code'=>-2,'msg'=>'导⼊失败']);}/*** 读表格信息*/public function excel($name,$files){//导⼊PHPExcel类库，因为PHPExcel没有⽤命名空间，只能inport导⼊import("Common.Vendor.Excel.PHPExcel");//创建PHPExcel对象，注意，不能少了\$PHPExcel=new \PHPExcel();if ($name == 'xls') {//如果excel⽂件后缀名为.xls，导⼊这个类import("Common.Vendor.Excel.PHPExcel.Reader.Excel5");$PHPReader=new \PHPExcel_Reader_Excel5();}if ($name == 'xlsx') {//如果excel⽂件后缀名为.xlsx，导⼊这下类import("Common.Vendor.Excel.PHPExcel.Reader.Excel2007");$PHPReader=new \PHPExcel_Reader_Excel2007();}//载⼊⽂件$PHPExcel=$PHPReader->load($files);$currentSheet=$PHPExcel->getSheet(0);$allColumn=$currentSheet->getHighestColumn();$allRow=$currentSheet->getHighestRow();//循环读取数据for($currentRow=2;$currentRow<=$allRow;$currentRow++){$arr['name'] = $PHPExcel->getActiveSheet()->getCell('B'.$currentRow)->getValue();$arr['mobile'] = $PHPExcel->getActiveSheet()->getCell('C'.$currentRow)->getValue();$arr['sex'] = $PHPExcel->getActiveSheet()->getCell('D'.$currentRow)->getValue();$arr['time'] = gmdate("Y年m⽉d⽇",\PHPExcel_Shared_Date::ExcelToPHP($PHPExcel->getActiveSheet()->getCell('F'.$currentRow)->getValue()));$data[] =$arr;}return$data; }。

BootstrapBootstrapDialog使⽤详解这⾥有两种展现⽅式写在前⾯：⾸先你要引⼊的库有css : bootstrap.min.css bootstrap-dialog.cssjs : jquery-1.11.1.min.js bootstrap.min.js bootstrap-dialog.js1、通过html代码显⽰<!-- Button trigger modal 弹出框的触发器 --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal 弹出框的结构 --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><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">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>这种⽅式简单直观；但会增加html的‘重量'，⽽且不够灵活，⼤量使⽤时不建议使⽤2、通过js的⽅式展现（需要注意的地⽅我都写在注释⾥了）（1）最简单的实现⽅式：BootstrapDialog.show({message: 'Hi Apple!'});还有⼀种更简单的实现⽅式：BootstrapDialog.alert('I want banana!'); //异步加载适合⽤在⽅法的最后（2）buttonsBootstrapDialog.show({message : "message",buttons : [{label : "btn1",cssClass : "btn-primary" //给按钮添加类名可以通过此⽅式给按钮添加样式},{label : "btn2",icon : "glyphicon glyphicon-ban-circle" //通过bootstrap的样式添加图标按钮},{label : "btn3",action : function(dialog){ //给当前按钮添加点击事件dialog.close();}}]});（3）操作title、message 可以通过 setTitle 和 setMessage 操作title和messageBootstrapDialog.show({title : "this is a title!", //titlemessage : "Document Comtent",buttons : [{label : "cancel",action : function(dialog){dialog.setTitle("title2"); //操作titledialog.setMessage("message1"); //操作messagedialog.close();}},{label : "Ok",action : function(dialog){dialog.close();}}]})（4）按钮热键（本⼈认为不常⽤）BootstrapDialog.show({title: 'Button Hotkey',message: 'Try to press some keys...',onshow: function(dialog) {dialog.getButton('button-c').disable(); //通过getButton('id')获得按钮 },buttons: [{label: '(A) Button A',hotkey: 65, // Keycode of keyup event of key 'A' is 65.action: function() {alert('Finally, you loved Button A.');}}, {label: '(B) Button B',hotkey: 66,action: function() {alert('Hello, this is Button B!');}}, {id: 'button-c',label: '(C) Button C',hotkey: 67,action: function(){alert('This is Button C but you won\'t see me dance.');}}]})（5）动态加载messageBootstrapDialog.show({//message : $("<div></div>").load('content.html') //第⼀种⽅式message : function(content){ //第⼆种⽅式var $message = $("<div></div>");var loadData = content.getData("contentFile");$message.load(loadData);return $message; //⼀定记得返回值！},data : {"contentFile" :"content.html"}});（6）控制弹出框右上⾓的关闭按钮BootstrapDialog.show({message: 'Hi Apple!',closable: true, //控制弹出框拉右上⾓是否显⽰ ‘x' 默认为truebuttons: [{label: 'Dialog CLOSABLE!',cssClass: 'btn-success',action: function(dialogRef){dialogRef.setClosable(true);}}, {label: 'Dialog UNCLOSABLE!',cssClass: 'btn-warning',action: function(dialogRef){dialogRef.setClosable(false);}}, {label: 'Close the dialog',action: function(dialogRef){dialogRef.close(); //总是能关闭弹出框}}]});（7）弹出框的尺⼨BootstrapDialog.show({title: 'More dialog sizes',message: 'Hi Apple!',size : BootstrapDialog.SIZE_NORMAL //默认尺⼨buttons: [{label: 'Normal',action: function(dialog){dialog.setTitle('Normal');dialog.setSize(BootstrapDialog.SIZE_NORMAL);}}, {label: 'Small',action: function(dialog){dialog.setTitle('Small');dialog.setSize(BootstrapDialog.SIZE_SMALL);}}, {label: 'Wide',action: function(dialog){dialog.setTitle('Wide');dialog.setSize(BootstrapDialog.SIZE_WIDE);}}, {label: 'Large',action: function(dialog){dialog.setTitle('Large');dialog.setSize(BootstrapDialog.SIZE_LARGE);}}]});以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

bootstrapTable动态绑定数据并⾃定义字段显⽰值第⼀步：我们在官⽹下载了bootstrap 的⽂档，并在项⽬中引⼊bootstrap table相关js⽂件，当然，也要记得引⼊jquery⽂件⼤概如图：第⼆步：定义⼀个table控件第三步：js绑定数据1 <script>23 $(function () {4 initTable();5 })67//初始化表格8 function initTable() {910//先销毁表格1112 $("#userTable").bootstrapTable('destroy');1314 $("#userTable").bootstrapTable({1516 method: "get",17 url: "/userManagement/UserData",//请求路径18 striped: true,//表格显⽰条纹19 pagination: true,//是否显⽰分页20 pageSize: 3,21 pageNumber: 1,22 pageList: [5, 10, 15, 20, 25],23 showColumns: true,24 showRefresh: true,//是否显⽰刷新按钮25 sidePagination: "server",//表⽰从服务端获取数据 --必须有26 queryParamsType: "undefined",//定义参数类型27 clickToSelect: true,28 queryParams: function (params) {29var param = {3031 pageIndex: params.pageNumber,32 pageSize: params.pageSize33 };3435return param;3637 },38 columns: [{39 aligin: 'center',40 checkbox: true,//显⽰复选框41 },42 {43 field: 'userId',44 title: '#',45 align: 'center',46 visible: true,47 },48 {49 field: 'userName',50 title: '昵称',51 align: 'center',52 },53 {54 field: 'userPwd',55 title: '密码',56 align: 'center',57 },58 {59 field: 'userTel',60 title: '电话',61 align: 'center',62 },63 {64 field: 'email',65 title: '邮箱',66 align: 'center',67 },68 {69 field: 'userImg',70 title: '头像',71 align: 'center',72 },73 {74 field: 'createTime',75 title: '注册时间',76//获取⽇期列的值进⾏转换77 formatter: function (value, row, index) {78return changeDateFormat(value)79 },80 align: 'center',81 },82 {83 field: 'lastTime',84 title: '最后更新时间',85//获取⽇期列的值进⾏转换86 formatter: function (value, row, index) {87return changeDateFormat(value)88 },89 align: 'center',90 },91 {92 field: 'isAble',93 title: '是否可⽤',94 formatter : function (value, row, index) {95if (row['isAble'] === 1) {96return'正常';97 }98if (row['isAble'] === 2) {99return'禁⽤';100 }101return value;102 },103 align: 'center',104105 },106 {107 field: 'isLine',108 title: '是否在线',109 formatter: function (value, row, index) {110if (row['isLine'] === 1) {111return'在线';112 }113if (row['isLine'] === 2) {114return'下线';115 }116return value;117 },118 align: 'center',119 },120 {121 field: 'remark',122 title: '备注信息',123 align: 'center',124 }],125 onLoadSuccess: function (data) {126 console.log(data);127128 },129 onLoadError: function (data) {130 console.log(data);131 }132 })133134 $("#add").click(function ()135 {136 $("#myModal").modal('show');137 })138 $("#edit").click(function () {139 $("#myModal").modal('show');140 })141 $("#close").click(function () {142 $("#myModal").modal('hide');143 });144 }145146//转换⽇期格式(时间戳转换为datetime格式)147 function changeDateFormat(cellval) {148var dateVal = cellval + "";149if (cellval != null) {150var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));151var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;152var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();153154var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();155var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();156var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();157158return date.getFullYear() + "-" + month + "-" + currentDate + "" + hours + ":" + minutes + ":" + seconds; 159 }160 }161162 </script>js绑定数据第四步：得到数据库数据1///<summary>2///⽤户数据列表3///</summary>4///<param name="pageIndex"></param>5///<param name="pageSize"></param>6///<returns></returns>7public ActionResult UserData(int pageIndex=1,int pageSize=5)8 {9 EFHelper<FileDBEntities> fileDB = new EFHelper<FileDBEntities>();10var result = fileDB.GetList<userInfo>();11var dataList = (from user in result12orderby erId13select new14 {15 erId,16 erName,17 erPwd,18 erTel,19 user.email,20 erImg,21 user.createTime,22 stTime,23 user.isAble,24 user.isLine,25 user.remark26 }).Skip(pageSize * (pageIndex - 1)).Take(pageSize); 27long totalCount = result.Count();28var jsonResult = new { total = totalCount, rows = dataList }; 29return Json(jsonResult, JsonRequestBehavior.AllowGet);303132 }得到数据库数据源显⽰效果如图：备注：如果表内有外键关系，可直接查询，⽆需连表，如图js绑定数据如下图：。

bootstrap得动态进度条Bootstrap的动态进度条：html: 创建⼀个modal 这⾥使⽤fade先将modal隐藏起来，然后modal⾥⾯嵌⼊progress 代码很简单<div class="modal fade" data-backdrop="static" tabindex="-1" id="progressbar"><!--窗⼝声明：--><div class="modal-dialog modal-lg"><!-- 内容声明 --><div class="modal-content"><!-- 主体 --><div class="modal-body"><div class="progress progress-striped active"><div id="test" class="progress-bar progress-bar-success" role="progressbar" style="width: 10%;">保存中:{{length}}%</div></div></div></div></div></div>PS:关于模态框：如果你想实现点击空⽩处不关闭模态框，可以在<div class="modal fade" data-backdrop="static">这⾥初始化modal的参数，或者在js⾥⾯通过$('.modal').modal({backdrop: 'static', keyboard: false});设置并打开，当然，哪种⽅便就⽤哪种//进度条的控制function startProgerss(){var trytmp=0;var wait=false;run();function run(){if(!wait){vue.length+=(Math.random()*10).ceil();}if(vue.length<=98){if(vue.length>80 && textupover && imgupover){vue.length=100;$("div[role='progressbar']").css("width","100%");//短暂延迟后刷新页⾯,貌似""作⽤是刷新本页⾯refreshtohome(1000, "");}else{$("div[role='progressbar']").css("width",vue.length+"%");var timer=setTimeout(run,100);}}else{//等待时间过长，可能出现了其他错误wait=true;//进⼊等待状态vue.length=99;$("div[role='progressbar']").css("width","99%");//查看服务器的响应if(textupover && imgupover){vue.length=100;$("div[role='progressbar']").css("width","100%");//短暂延迟后刷新页⾯,貌似""作⽤是刷新本页⾯refreshtohome(1000, "");}if(++trytmp<10){//超时等待(⼤约10s)var timer=setTimeout(run,1000);}else{alert("服务器响应失败！");//隐藏进度条提⽰框$('#progressbar').modal('hide');//重置进度条的长度vue.length=10;}}}} 解释：重点是要明⽩进度条的意义：给⽤户⼀个读条，让⽤户看到程序是在进⾏⽽不是死机了，这可以加强应⽤的⽤户体验效果我上⾯代码是这样设计的：当提交表单，调⽤js显⽰模态框（相当于显⽰进度条），然后js动态改变进度条的样式（长度）,⾃⼰控制⼀个可取的范围当前台接收到后台的响应的时候，让进度条加载到100%,关闭模态框（隐藏进度条）,刷新数据。