Bootstrap 如何手动控制 modal 的隐藏?

Bootstrap 如何控制 modal 的隐藏? 下面本篇文章给大家介绍一下 Bootstrap 手动控制模态框隐藏和显示的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.

在网页开发过程中, 我们经常会使用 Bootstrap 这套由推特开源的前端框架. 其中在业务的开发过程中, 存在这样的业务场景: 点击编辑按钮, 弹出模态框, 然后在模态框中对信息进行编辑. Bootstrap 的模态框, 如果设置的是默认点击空白处自动关闭, 不是自己通过 JS 进行控制时, 验证信息使用 alert("XXXX"), 点击否, 会直接关闭模态框, 之前填写的内容会清空, 导致用户体验不好.

[相关教程推荐: Bootstrap 视频教程 https://www.html.cn/kuangjia/bootstrap/ ]

那么怎么解决这个问题呢? 接下来, 我将讲解一下如何处理:

1, 一般情况下, 我们使用 Bootstrap 模态框会使用下面的代码

如果使用这段代码, 同时没有清除红框内部分的代码, 这将会导致你在关闭 alert() 时点击 "否", 直接关闭模态框.

2, 使用 JS 控制模态框显示和隐藏. 首先你需要去掉红框内的代码, 然后通过 $("#myModal").model("show") 来控制 id 为 myModal 的模态框显示, 使用 $("#myModal").model("hide") 来控制 id 为 myModal 的模态框隐藏.

使用 Bootstrap 的模态框的默认设置, 确实很方便. 但是在某些使用场景下, 会导致使用体验较差, 因此, 在合适的时候还是需要切换到手动控制模态框显示隐藏.

更多 Bootstrap 的相关知识, 可访问: web 前端自学 https://www.html.cn/ !!

来源: http://www.css88.com/framework/bootstrap/18042.html