Bootstrap模态对话框：动态载入内容
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动态加载数据示例代码
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();}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
bootstrap3-dialog：更强大、更灵活的模态框（封装好的模态框）
var title = $this.attr("title") || $this.text(); var url=$this.attr("href"); $.ajax({
不过，我们需要做一下封装。
第一步，页面加载时，我们需要让a标签执行ajaxTodialog方法。
$(function() { // dialogs if ($.fn.ajaxTodialog) { $("a[target=dialog]").ajaxTodialog(); }
});
第二步，封装ajaxTodialog方法。
return $message; }, // 找到自定义页面上x号进行绑定close事件 onshown : function(dialogRef) {
var $button = dialogRef.getModalContent().find('button[data-widget="remove"]'); $button.on('click', {
size : BootstrapDialog.SIZE_SMALL, // 对话框关闭的时候执行方法 onhide : funcclose, callback : function(result) {
// 点击确定按钮时，result为true if (result) {
bootstrap 使用方法
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模态框
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">×</button>6 <h4 class="modal-title">标题</h4>7 </div>8 <div class="modal-body">9 <p>这⾥是弹窗的具体内容......…</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">×</button>8 <h4 class="modal-title">标题</h4>9 </div>10 <div class="modal-body">11 <p>这⾥是弹窗的具体内容......…</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表格数据
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">×</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;">上传⽂件<sup>*</sup></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使用详解
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">×</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);}}]});以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
bootstrap模态框关闭后清除模态框的数据
请问该怎么做才能清空之前的数据
解答： 1。 初始化输入框不行么？ $(this).removeData('bs.modal')换成 $('input').value(''); 2. 将输入框的value值设为空不就可以了吗？$('input，textarea').value(''); 3.
$('body').on('hidden.bs.modal', '.modal', function () { $(this).removeData('bs.modal');
});
楼主试试这remote功能在弹出模态框时动态加载界面但是当打开过一个模态框后打开其他的模态框数据不会刷新还是保留原来的
bootstrap模 态 框 关 闭 后 清 除 模 态 框 的 数 据
我用了bootstrap模态框的remote功能，在弹出模态框时动态加载界面，但是当打开过一个模态框后，打开其他的模态框，数据不会刷新，还 是保留原来的。 如图所示
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Bootstrap模态对话框：动态载入内容Bootstrap官方文档给出了一个模态对话框的例子：<div class="modal fade"><div class="modal-header"><h3>模态框header </h3></div><div class="modal-body"><p>模态框body</p></div><div class="modal-footer"><p>模态框footer</p></div></div>这是一个静态案例，写在页面上可以通过href或者js调用显示。
现在，当前页面上可能有多个模态对话框。
如果使用静态的方式，那么有多少模态对话框就要重写上面的代码多少遍。
一个页面中填满了类似的代码，非常不友好。
于是希望，页面上只保留一个<div>用于容器，每个模态对话框的具体内容抽出来，单独写到一个页面中。
当需要显示哪个模态对话框时，只需要将该模态对话框对应页面的内容载入到<div>容器中即可。
Bootstrap的modal本身就提供了这种能力。
Bootstrap主要分两部分：①最外层<div>，含modal与fade类。
②内层的内容，有3个<div>，分别含modal-header，modal-body和modal-footer类。
有的模态对话框如下：<div class="modal fade"tabindex="-1"role="dialog"> <div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h4>模态框header</h4></div><div class="modal-body"><p>模态框body</p></div><div class="modal-footer"><p>模态框footer</p></div></div></div></div>这样的模态对话框有四个部分：①最外层<div>，含modal与fade类。
②第二层<div>，含modal-dialog类。
③第三层<div>，含modal-content类。
④第四层内容，有3个<div>，分别含modal-header，modal-body和modal-footer类。
实际上，起主要作用的是最外层<div>，modal类是必须的。
modal-dialog，m odal-content以及内层的3个<div>的类主要是用于样式，因此是可以缺少和修改的。
不过，建议维持原格式。
Bootstrap的modal.options.remote属性可以指定一个渲染页面，或者一个请求，只要这个请求最终也是返回一个渲染页面即可。
当用js来启动modal时，就会获取到指定的渲染页面，并填充到modal-body部分的内容里。
这种方法有个问题，那就是模态对话框的渲染页面只会初始化一次，直到再次刷新页面为止。
目前普遍的一个解决方法是在隐藏模态窗的时候去除数据：$("#myModal").on("hidden", function() {$(this).removeData("modal");});但该方法在某些情况下并不好用。
而实际上，除了上述方法外，还可以调用jQuery的load()函数来为<div>加载渲染页面。
直接调用jQuery的load()会将指定的<div>所有的子内容全部清除，替换为渲染页面。
使用jQuery的load()，同样需要在隐藏模态窗的时候去除数据，但不会出现失灵的情况。
以下为Bootstrap中Modal的源码：var Modal = function (element, options) {this.options = optionsthis.$element = $(element).delegate('[data-dismiss="modal"]', 'click.dismiss.modal ', $.proxy(this.hide, this))this.options.remote && this.$element.find('.modal-body').l oad(this.options.remote)}可以看到最后一行，当this.options.remote存在时，会调用this.$elem ent.find('.modal-body').load(this.options.remote)，也就是说会找到含modal-body类的<div>，对该<div>调用jQuery的load()，来将remote所指向的渲染页面加载到该<div>中。
现在使用jQuery的load()方式。
要创建一个动态加载的模态对话框，可以使用如下方式：1.在主页面中，：<div class="modal fade" id="myModal"></div><script>// 模态对话框隐藏时移除数据$("#myModal").on("hidden", function() {$(this).removeData("modal");});// 显示模态对话框var showModal = function() {var remote = "/test/showModal";if (remote != "") {$("#myModal").load(remote, function() {$("#myModal").modal('show');});}};</script>其中showModal()函数可以由按钮等控件进行调用。
2.在模态对话框页面中只填写内容部分：<div class="modal-header"><h3>模态框header </h3></div><div class="modal-body"><p>模态框body</p></div><div class="modal-footer"><p>模态框footer</p></div>这样，当调用主页面的showModal()函数时，就会请求模态对话框页面(即2中的内容)。
该模态对话框页面会以jQuery.load()的方式加载到$("#myModal")中，也就显示出了模态对话框。
注意要将页面加载给哪个<div>，就由哪个<div>调用jQuery.load()。
这个<div>不一定是最外层的<div>。
但调用jQuery. modal('show')的一定是最外层的<div>。
可以与下面的代码进行对比：1.在主页面中，：<div class="modal fade" id="myModal"><div class="modal-dialog"><div class="modal-content" id="modalContent"></div></div></div><script>// 模态对话框隐藏时移除数据$("#myModal").on("hidden", function() {$(this).removeData("modal");});// 显示模态对话框var showModal = function() {var remote = "/test/showModal";if (remote != "") {$("#modalContent").load(remote, function() { $("#myModal").modal('show');});}};</script>2.在模态对话框页面中只填写内容部分：<div class="modal-header"><h3>模态框header </h3></div><div class="modal-body"><p>模态框body</p></div><div class="modal-footer"><p>模态框footer</p></div>。