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

场景

对于弹出框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;
}