1

我在弹出窗口中遇到了星级评定问题，css 似乎被忽略了。我正在用 js 初始化弹出窗口，如下所示：

$(function () {
$('[data-toggle="popover"]').popover({
    html: true,
    content: $('#popoverContent').html()
});
});

弹出内容：

<div id="popoverContent" class="hide">
  <h4><span class="label label-default">Screen</span><input type="number" class="rating" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>
</div>

但是，我认为如果我将代码直接放在 data-content 属性中，它可能会起作用：

<button id="popoverButton" type="button" class="btn btn-success btn-sm" data-container="body" data-toggle="popover" data-placement="bottom" data-content="<h4><span class="label label-default">Screen</span><input type="number" class="rating" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>">
  Rate <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
</button>

编辑：我刚试过，它也没有用：/

有没有办法让 CSS 工作？

提前致谢。

这是一个小提琴样本，看看我在说什么：

https://jsfiddle.net/66xL9sLr/

4

2 回答 2

0

这是因为您直接链接到 github 上的 css 资源。这不适用于 fiddle 之类的服务（当您添加它时会特别警告您）。

在控制台中，您应该会看到类似以下的错误：

样式表 https://raw.githubusercontent.com/kartik-v/bootstrap-star-rating/master/css/star-rating.min.css 未加载，因为它的 MIME 类型“text/plain”不是“文本/css”。

如果您将 CSS 手动添加到小提琴的 CSS 字段中或将文件托管在其他地方，它就可以正常工作。

话虽如此，该插件的javascript似乎仍然存在问题，并且布局引导程序为弹出框创建了。

第二个问题是因为星级评级是使用隐藏#popoverContent元素的布局初始化的。该插件使用该元素的尺寸等，而不是弹出窗口中的新元素。

为了解决这个问题，我做了以下事情：

  1. .rating从您的输入中删除类。这可以防止插件在添加到弹出框之前对其进行初始化。
  2. 绑定到弹出框inserted.bs.popover并在那里初始化评级。现在，评级插件将使用刚刚插入弹出框的元素的布局运行其代码。

相关代码可见这里：

...

<div id="popoverContent" class="hide">
  <h4><span class="label label-default">Screen (Quality)</span><input class="ratingInput" type="number" min=0 max=5 step=0.5 data-show-caption="false" data-size="xs"></h4>
</div>

...

$(function () {
    $('[data-toggle="popover"]').popover({
        html: true,
        content: function() {
          return $('#popoverContent').html();
        }
    });

  $('[data-toggle="popover"]').on('inserted.bs.popover', function () {
    $( 'body .popover .ratingInput' ).rating('create');
  });
});

更新的小提琴在这里可用。

于 2016-03-04T18:48:49.677 回答
-1

奇怪，您尝试过内联样式吗？

于 2016-03-04T18:17:13.810 回答