Bootstrap中怎么使用模态框?下面本篇文章给大家介绍一下Bootstrap5模态弹框Modal组件的用法,希望对大家有所帮助!
使用Bootstrap的JavaScript模式插件将对话框添加到站点中,用于灯箱、用户通知或完全自定义的内容。【相关推荐:《bootstrap教程》】
通过点击下面的按钮切换动态视窗呈现。它将从页面顶部向下滑动并淡入。点击关闭按钮或者点击背景区域,弹出窗口关闭。
当将背景设置为静态时,互动视窗不会因为点击背景而关闭。将 将26.2.1例子中的代码 替换为 从外观上看没什么区别,只是点击背景,弹出框不再被关闭。 默认情况下,当使用者的动态视窗变得太长时,它们的滚动独立于于页面本身,在浏览器上会启用竖向滚动条。 你可以在modal-dialog 中加入modal-dialog-scrollable 來創建一个 body 可滚动的弹出窗口。 将26.3.1例子中 替换为 加入 下边是带滚动条的 上面的例子由于截图只选择了一部分窗口的原因,可能看不出,以下两张图分别是26.2.1演示把窗口拉高后的显示效果,和添加垂直居中后的显示效果。 在多个模态之间切换,巧妙地放置data-bs-target和data-bs-Toggle属性。例如,可以在已打开的登录模式中切换密码重置模式。请注意,不能同时打开多个模态。这个方法只是在两个单独的模态之间切换。 更多关于bootstrap的相关知识,可访问:bootstrap基础教程!! 위 내용은 Bootstrap中怎么使用模态框?Modal组件用法浅析의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!data-bs-backdrop="static" data-bs-keyboard="false"
加入
3 滚动长内容
3.1 使用浏览器滚动条
3.2 使用弹窗滚动条
4 垂直居中
modal-dialog-centered
到modal-dialog
来使互动视窗垂直居中。
该设置较为简单,只需做如下改变即可。5 多个模态框切换