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

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

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

【相关教程推荐:bootstrap视频教程

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

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

1.jpeg

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

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

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

更多bootstrap的相关知识,可访问:web前端自学!!

以上就是bootstrap如何手动控制modal的隐藏?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Bootstrap 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏