bootstrap中jquery插件——警告框、工具提示框、弹出框、模态框
2017-03-24 10:46
756 查看
bootstrap的JavaScript插件中提供了几种形式的提示框。其中就有警告框、工具提示框、弹出框和模态框。下面就来一个一个的看看它们是怎样使用的吧!
它就是这个样子的,点击右侧的小叉子可以将它隐藏。如果不想要淡淡消失的效果可以将 .fade.in 类去掉,和bootstrap其他组件改变颜色的方式一样(只需将类 .alert-info改为 .alert-danger / .alert-link / alert-success / alert-warning 之一种就可以),实现代码如下:
如上图所示的效果,当鼠标经过需要提示的位置时会弹出一个提示框,可以选择在上/下/左/右任意位置弹出(更改data-placement属性),可通过title属性更改提示的内容,实现代码如下:
js调用API:
如上图所示,当鼠标点击按钮时会弹出一个提示框,可以选择在上/下/左/右任意位置弹出(更改data-placement属性),可通过title属性更改标题、data-content属性更改内容,实现代码如下:
js调用API:
这种方式的弹出框只有在再次点击按钮的时候才会被隐藏,要想在点击其他位置或点击弹出框的时候将它隐藏,则需要加上data-trigger=”focus”属性。
为了更好的跨浏览器和跨平台效果,必须使用 a 标签,不能使用 button 标签,并且,还必须包含 role=”button” 和 tabindex 属性:
js调用API方式同上。
点击之后弹出模态框:
如上图所示,当鼠标点击按钮时会弹出模态框,先说一下实现模态框需要的最基本的代码。
模态框的触发元素(注意href或data-target属性值一定与模态框的ID属性值相对应):
这样一个模态框的基本结构就完成了,可以根据自己的需要在头部、主体部分和脚部添加内容。添加内容方式和body中相同,同样可以使用栅格系统、表单、警告框、下拉菜单等内容。
模态框都是固定定位的,且初始时一般都是不显示的,推荐作为body的最后一个直接子元素。
最后,完整示例:
警告框
它就是这个样子的,点击右侧的小叉子可以将它隐藏。如果不想要淡淡消失的效果可以将 .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">×</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">×</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">×</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>
相关文章推荐
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- Bootstrap 提示工具和弹出框(Popover)插件
- JBox - 模态窗口,工具提示和消息 jQuery 插件
- BootStrap 工具提示 弹出框 警告框
- jQuery弹出警告对话框美化插件(警告,确认和提示)
- 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
- 基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
- jQuery+bootstrap实现美化警告/确认/提示对话框插件
- jQuery+bootstrap实现美化警告/确认/提示对话框插件
- jQuery弹出警告对话框美化插件(警告,确认和提示)
- JBox - 模态窗口,工具提示和消息 jQuery 插件
- jQuery弹出警告和提示框插件集合
- jquery 气泡式工具提示(tooltip)插件BeautyTips
- 20款优秀的jQuery工具提示插件
- 推荐17个优美新鲜的jQuery的工具提示插件
- 推荐20款非常优秀的 jQuery 工具提示插件
- 推荐17个优美新鲜的jQuery的工具提示插件
- 推荐17个优美新鲜的jQuery的工具提示插件
- 轻量级工具提示jQuery插件 - Tooltipster
- 20 个非常有用的jQuery 工具提示插件