場景

對于彈出框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代码实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。