bootstrap 模态框（modal）点击空白处和ESC不关闭的方法

JavaScript025

bootstrap 模态框（modal）点击空白处和ESC不关闭的方法,第1张

bootstrap 模态框（modal）默认点击非模态框部分和键盘esc会关闭模态框，但是有时会有需求不允许关闭，所以介绍一下实现这种需求的两种方法。第一种：使用js$('#modal').modal({backdrop: 'static', keyboard: false}) backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不关闭.第二种：使用属性data-backdrop="static" data-keyboard="false" 如：

JS代码：

<script>

$(document).ready(function(){

$("#myModal").on("shown.bs.modal", function (){

$("#myInput").focus()

})

$("div.food_cell").click(function(){

$("#myModal").modal("toggle")

})

})

</script>

HTML代码：

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">保存</span></button>

把button放在模态框里就OK了

首先js代码分号问题

js代码不加分号可以运行的，但是可能会引起歧义的情况，看个人代码风格吧

modal()问题

这是一段bootstrap 的弹出框的js代码，没有cshtml部份代码是看不出来整段代码的意思。

$('#myModal').modal()是显示弹出框的意思。

$(document).on("click","#change",function(){

$('#myModal').modal()

.....

}

弹出框一般状态都是隐藏的。大概意思是点击 id为 "change"的按钮后，显示id为myModal的弹出框，在弹出框里显示一些东西。

下面一段类似代码解释：

弹出框cshtml代码

编写弹框，设置弹框id为"myModal",弹框头部文本id为"myModalLabel"，模态弹框中内容为一系列输入框。

点击 id为 "btn_add"的按钮时，更改模态框头部文本为新增，弹出模态框。

点击模态框周围空白部份则会关闭它。

//注册新增按钮的事件

$("#btn_add").click(function () {

$("#myModalLabel").text("新增")//更改模态框头部文本为新增

$('#myModal').modal()                //弹出模态框

})

运行结果

不知道是不是版本还是默认参数问题，上网查询的$('#myModal').modal()是有参数的

$('#myModal').modal("show")//显示模态弹框

$('#myModal').modal("hide")//隐藏模态弹框

$('#myModal').modal("toggle")//模态弹框状态反转