bootstrap 3.3.7升级到3.4.1后popover插件提示框内容不完整且无法鼠标移上点击的问题

首先是生成的内容不全,在 The Bootstrap Blog 当中有说到由于 XSS 的问题,禁用了一些属性,你可以手动关闭它,但是你不能用 data-* 的方式。

Earlier this week a developer reported an XSS issue similar to the data-target vulnerability that was fixed in v4.1.2 and v3.4.0: the data-template attribute for our tooltip and popover plugins lacked proper XSS sanitization of the HTML that can be passed into the attribute’s value.
To resolve the issue, we’ve implemented a new JavaScript sanitizer to only allow whitelisted HTML elements in data attribute. You may modify our sanitization implementation to customize the HTML element whitelist, totally disable the sanitization, or pass your own sanitize function (useful if you use your own library). However, for added protection, there is no way to modify the sanitization via data attributes—you must modify these plugin options via the JavaScript API.

另外关于鼠标移上提示框,这是网上早有的案例,但是因为新版本生成的 html 内容放在了 body 的上面,而不是放在同级,所以需要做一些改动:data-trigger 的值修改为 manual,鼠标移出隐藏的 selector 也要修改。

const id = row.userId;
const more = `
  <button class='btn btn-default btn-xs ${resetPwdFlag}' οnclick='resetPwd(${id})'><i class='fa fa-key'></i> 重置密码</button>
  <button class='btn btn-default btn-xs ${editFlag}' οnclick='authRole(${id})'><i class='fa fa-check-square-o'></i> 分配角色</button>`;
return `
  <button class="btn btn-success btn-xs ${editFlag}" οnclick="$.operate.edit(${id})"><i class="fa fa-edit"></i> 编辑</button>
  <button class="btn btn-danger btn-xs ${removeFlag}" οnclick="$.operate.remove(${id})"><i class="fa fa-remove"></i> 删除</button>
  <button tabindex="0" class="btn btn-info btn-xs" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-trigger="manual" data-content="${more}"><i class="fa fa-chevron-circle-right"></i> 更多操作</button>`;
// 气泡弹出框特效(移到元素时)
$(document).on("mouseenter", '.table [data-toggle="popover"]', function () {
  var _this = this;
  $(this).popover({
    // Bootstrap 升级到 3.4.1 后,由于安全策略,在 html 属性值中禁用了一些标签(https://blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/)
    sanitize: false
  }).popover("show");
  $(document).on("mouseleave", ".popover", function () {
    $(_this).popover('hide');
  });
})

// 气泡弹出框特效(离开元素时)
$(document).on("mouseleave", '.table [data-toggle="popover"]', function () {
  var _this = this;
  setTimeout(function () {
    if (!$(".popover:hover").length) $(_this).popover("hide");
  }, 100);
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值