bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框

bootstrap的JavaScript插件中提供了几种形式的提示框。其中就有警告框、工具提示框、弹出框和模态框。下面就来一个一个的看看它们是怎样使用的吧！

警告框

它就是这个样子的，点击右侧的小叉子可以将它隐藏。如果不想要淡淡消失的效果可以将 .fade.in 类去掉，和bootstrap其他组件改变颜色的方式一样（只需将类 .alert-info改为 .alert-danger / .alert-link / alert-success / alert-warning 之一种就可以），实现代码如下：

<div class="alert alert-info alert-dismissible fade in">
    <span class="close" data-dismiss="alert">&times;</span>  //span标签必须为第一个子元素
    <p><span class="glyphicon glyphicon-alert"></span> 注意：您的浏览器禁用了Cookie！本站的部分功能将无法使用！</p>
</div>

工具提示

如上图所示的效果，当鼠标经过需要提示的位置时会弹出一个提示框，可以选择在上/下/左/右任意位置弹出（更改data-placement属性），可通过title属性更改提示的内容，实现代码如下：

<p>
    Lorem ipsum dolor sit amet, consectetur 
    <a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
        Tooltip on top
    </a>
    Aliquid architecto aut ea eaque error fugit, illo, laboriosam mollitia natus nostrum perferendis placeat porro quibusdam reiciendis, rem repellat veritatis? Eius, magnam.
</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>

js调用API：

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

弹出框

如上图所示，当鼠标点击按钮时会弹出一个提示框，可以选择在上/下/左/右任意位置弹出（更改data-placement属性），可通过title属性更改标题、data-content属性更改内容，实现代码如下：

<button type="button" class="btn btn-success" data-toggle="popover" data-placement="bottom" data-container="body" title="popover title" data-content="And here's some amazing content. It's very engaging. Right?">popover of top</button>

js调用API：

$(function () {
    $('[data-toggle="popover"]').popover()
})

这种方式的弹出框只有在再次点击按钮的时候才会被隐藏，要想在点击其他位置或点击弹出框的时候将它隐藏，则需要加上data-trigger=”focus”属性。
为了更好的跨浏览器和跨平台效果，必须使用 a 标签，不能使用 button 标签，并且，还必须包含 role=”button” 和 tabindex 属性：

<a href="#" class="btn btn-success" data-toggle="popover" data-placement="bottom" data-container="body" title="popover title" data-content="It's very engaging. Right?" data-trigger="focus" role="button" tabindex="0">popover of top</a>

js调用API方式同上。

模态框

点击之后弹出模态框：

如上图所示，当鼠标点击按钮时会弹出模态框，先说一下实现模态框需要的最基本的代码。

<div class="modal" id="...">    //这里可以设置从上向下的动画显示效果，只需添加 .fade 类
    <div class="modal-dialog">    //这里可以选择模态框预定义的三种宽度，如果想要显示比较大的，可以添加类 .modal-lg；显示比较小的，添加类 .modal-sm
        <div class="modal-content">
            <div class="modal-header">    //模态框的头部，如果不需要可以不写这个元素
                <span class="close" data-dismiss="modal">&times;</span>    //关闭按钮，必须设置为第一个子元素
                <h3 class="modal-title">...</h3>    //加上这个类才能和关闭按钮水平对齐
            </div>
            <div class="modal-body">    //主题内容
                ...
            </div>
            <div class="modal-footer">    //模态框的脚部，如果不需要可以不写这个元素
                ...
            </div>
        </div>
    </div>
</div>

模态框的触发元素（注意href或data-target属性值一定与模态框的ID属性值相对应）：

<a href="#模态框的ID" class="..." data-toggle="modal">.../a>
<!-- 或 -->
<button type="button" class="..." data-toggle="modal" data-target="#模态框的ID">...</button>

这样一个模态框的基本结构就完成了，可以根据自己的需要在头部、主体部分和脚部添加内容。添加内容方式和body中相同，同样可以使用栅格系统、表单、警告框、下拉菜单等内容。

模态框都是固定定位的，且初始时一般都是不显示的，推荐作为body的最后一个直接子元素。

最后，完整示例：

<a href="#modal" class="btn btn-info" data-toggle="modal">注册新用户</a>

<div class="modal fade" id="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" data-dismiss="modal">&times;</span>
                <h3 class="modal-title">标题</h3>
            </div>
            <div class="modal-body">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci aliquam magni quasi rem vitae. Aliquam, aspernatur eaque error eveniet fugit, hic, iste labore magnam necessitatibus numquam possimus ut? Nostrum.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>