Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。
最简单的触发方式如下:
html代码:
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="提示框居左" data-content="我是弹出框的内容"> 猛击我吧 </button>
js代码:
$(function(){ $('[data-toggle="popover"]').popover(); });
注意:上面这种方法注意要使用 data- 设置弹出框的属性。
使用JS设置参数:
html代码:
<button type="button" class="btn btn-default" id="myPopover"> 猛击我吧 </button>
除此之外,也可以单独指定一个元素,在该元素上调用提示框,并且可能通过JavaScript的各种参数来实现,无需定义一些data属性,如:
$(function(){ $('#myPopover').popover({ title:"我是弹出框的标题", content:"我是弹出框的内容", placement:"top" }); });
如下面示例所示:
调用popover的时候,options的参数与声明式选择里以data-开头的自定义属性一样。都可以在options里设置,以便制作出各式各样的效果。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>触发弹出框的方法</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> body{ padding: 10%; } </style> </head> <body> <button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="提示框居左" data-content="我是弹出框的内容"> 猛击我吧 </button> <!--下面是代码任务部分--> <button type="button" class="btn btn-default" id="myPopover"> 猛击我吧 </button> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>