场景

对于弹出框bootstrap就有模态框(modal)。

有时显示模态框，按键盘上ESC就会关闭模态框，所以在打开模态框时设置其属性。

实现

modal显示：

 $("#apAddAndEidtModel").modal('show');

modal隐藏：

$("#apAddAndEidtModel").modal('hide');

modal禁用Esc:

$("#apImportModel").modal({show:true, keyboard:false});

示例代码

页面代码：

<div class="modal inmodal" id="apImportModel" tabindex="-1" role="dialog"  aria-hidden="true"><div class="modal-dialog" id="apImportDiv" th:fragment="apImportDiv"><div class="modal-content animated fadeIn"><button type="button" class="close" onclick="return Testclose();" id="closeUploadBtn"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><form  class="dropzone"  id="dropzoneForm" enctype="multipart/form-data"><div class="fallback"><input name="file" value="1M以内的Excel文件" type="file" id="file_id"  accept=".xls,.xlsx" onchange="fileChange(this);" /></div></form><button id="uploladBtn" class="btn btn-info mt-2" type="button" onclick="return uploadExcel()"><i class="fa fa-reply"></i>上传</button><button id="parseBtn" class="btn btn-info mt-2" type="button" onclick="return parseExcel()"><i class="fa fa-reply"></i>导入</button></div></div></div>

js代码：

 //导入Excel操作function importExcel(){$("#apImportModel").modal({show:true, keyboard:false});}

//关闭窗口操作
function Testclose(){debugger$("#apImportModel").modal('hide');$("#file_id").val(null);return false;
}

Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现相关推荐

地图选点 php,百度地图选点–Bootstrap模态框(Modal)插件
在网站的开发过程中,例如商家的注册等,需要商家设定自己的经纬度进行对商家的精确定位,同时也方便用户查找到附近距离范围内的商家.这样更利于网站的用户和商家互动.商家设定自己的经纬度就需要使用到百度地图2 ...
python测试开发django-122.bootstrap模态框(modal)学习
前言模态框(Modal)是覆盖在父窗体上的子窗体,使用场景比如:在页面上编辑内容的时候经常需要弹出一个框框,可以编辑字段提交. 点删除按钮的时候,需要弹出二次确认框,这种现页面上的框框就是模态框模 ...
bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
Bootstrap模态框居中显示
Bootstrap默认的模态框不是居中显示的,需要稍微修改下源代码: 1.打开源码bootstrap.js,在里面找到如下代码: 2.在上述代码段落下面增加居中的代码即可: //使弹出框居中...va ...
Bootstrap模态框modal的高度和宽度设置
(1)高度将style="height:900px"放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会 ...
纯html点击按钮弹出表单,Bootstrap使用模态框modal实现表单提交弹出框
Bootstrap 模态框(Modal)插件模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如 ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...

Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现

场景

实现

示例代码

Bootstrap模态框(modal)显示、隐藏与禁用ESC代码实现相关推荐

最新文章

热门文章