Bootstrap弹出模态框

弹出模态框 (Modal)

使用Bootstrap的JavaScript模态框插件可以为您的网站添加醒目的提示和交互，用于通知用户、访客交互、消息警示或自定义的内容交互（如考试问答场景-译者注）

运行原理

在开始使用Bootstrap模态框组件前，请务必阅读以下内容，因为我们的菜单选项最近有新的更改迭代。

弹出模态框是用HTML、CSS和Javascript构建的，它们位于文档中其它表现元素之上，并从中删除滚动事件，以便模态框自身的内容能得到滚动。

点击模态框的“backdrop”（灰背景区域），将自动关闭动态模块框。

Bootstrap一次只支持一个模态窗口，不支持嵌套模式，因为我们相信那样叠加会造成用户体验不佳。

模态框使用 position: fixed，在呈现上与其它元素相比有很大不同。请尽可能将弹出模态框的HTML放在顶级位置，以避免其它元素干扰，尤其是当另一个固定元素中也定义了 .modal 事件时，你可能会遇到问题。

同样是受position: fixed属性影响，在在移动设备上使用模态框，有一些注意事项。有关详细信息，请参阅浏览器支持文档。

根据HTML5的语义定义， autofocus HTML 属性对 Bootstrap 模态框没有影响，要达到同样的效果，需要使用一些JavaScript:

Copy

KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲myModal').on('s…(’#myInput’).trigger(‘focus’)})

静态例子-动态窗口组件

下面是一个静态 模式的例子(其 position 和 display 已经被重写 )，包括模态标题、模态体 (需要 padding)、模态页脚（可选)，我们要求你尽可能地在模态标题区加上移除关闭按钮，或提供另一个明确的关闭动作。

Modal title

Modal
body text goes here.

CloseSave
changes

Copy

 

    

      

        

Modal title

                   ×              

      

        

Modal body text goes here.

      

      

        Save changes        Close      

    

 

完整示例   Launch demo modal

 

    

      

        

Modal title

                   ×