3-14 弹出框--触发弹出框的方法
本节编程练习不计算学习进度,请电脑登录imooc.com操作

弹出框--触发弹出框的方法

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里设置,以便制作出各式各样的效果。

任务

我来试试:在38行补充代码,使用JS方法弹出提示框设置参数

效果图如下:


 

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>触发弹出框的方法</title>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. <style>
  8. body{
  9. padding: 10%;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.  
  15. <button type="button"
  16. class="btn btn-default"
  17. data-toggle="popover"
  18. data-placement="bottom"
  19. title="提示框居左"
  20. data-content="我是弹出框的内容">
  21. 猛击我吧
  22. </button>
  23.  
  24. <!--下面是代码任务部分-->
  25.  
  26. <button type="button"
  27. class="btn btn-default"
  28. id="myPopover">
  29. 猛击我吧
  30. </button>
  31.  
  32.  
  33. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  34. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  35. <script>
  36. $(function(){
  37. $('[data-toggle="popover"]').popover();
  38.  
  39.  
  40. });
  41. </script>
  42.  
  43. </body>
  44. </html>
下一节