章节
问答
笔记
评论
占位
占位

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

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方法弹出提示框设置参数

效果图如下:


 

?不会了怎么办

参考代码如下:

$(function(){
    $('[data-toggle="popover"]').popover();
    
    $('#myPopover').popover({
        title:"弹出框的标题",
        content:"弹出框的内容",
        placement:"right"
 
    });
});
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?