场景
对于弹出框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">×</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;
}