Modals 模态框 bootstrap react

pencil 26天前 21

向站点中添加对话框,用于lightbox、用户通知或完全自定义的内容。
概述
模态框被放置在文档中的所有其他内容之上,并从<body>中删除scroll,这样模态框就会滚动。
模态框在关闭时被卸载。
引导一次只支持一个模式窗口。嵌套模态框不受支持,但是如果你真的需要它们,如果你愿意,底层的react覆盖层可以支持它们。
模态的“陷阱”集中在它们上面,确保键盘导航循环通过模态,而不是页面的其余部分。
与vanilla引导不同,autoFocus在Modals中工作,因为React处理实现。
Static Markup 静态标记
下面是一个静态模态对话框(没有定位)来演示模态的外观和感觉。
Live demo 现场演示
带有页眉、正文和页脚操作集的模态。将<Modal/>与其他组件结合使用可显示或隐藏模态。<Modal/>组件附带了几个方便的“子组件”:<Modal.Header/>、<Modal.Title/>、<Modal.Body/>和<Modal.Footer/>,您可以使用这些组件构建模态内容。
Static backdrop 静态背景
当background设置为static时,当在其外部单击时,模式将不会关闭。单击下面的按钮进行尝试。
Without Animation 没有动画
模态也可以没有动画。为此,设置“动画”道具为假。
Vertically centered 垂直居中
通过传递“居中”属性,可以使模态垂直居中。
Using the grid 使用网格
可以在模型中使用栅格布局,在模态内容中使用常规栅格组件。
Optional Sizes 可选尺寸
您可以使用“size”属性指定引导大模式或小模式。

API
    Modal
    ModalDialog
    ModalHeader
    ModalTitle
    ModalBody
    ModalFooter

最新回复 (0)
返回
发新帖