javascript - "Modal hide fade"阻止内部图表 div 显示

Question

需要一些帮助，我陷入困境。我想要实现的是，单击按钮时，会出现一个弹出窗口，并显示基于发送的数据的条形图。到目前为止，我所知道的是图表绘制没有问题，但是当我将其放入弹出模式时，它没有显示。

<div class="modal hide fade"  id=" PopUpModal" aria-hidden="true" style="float: initial; width :80%" role="dialog">


        <h3 data-bind="text: title"></h3>
        <hr />

        <div id="ChartModal" class="chart" style="width: 780px; height: 300px;"> </div>
    </div>

如您所见，图表模式位于弹出式 div 内。单击弹出按钮时，除了标题和 hr 行之外，弹出模式显示为空。但是，您可以看到图表模式占用的空间，但它是空白的。当我将图表模式放在弹出窗口之外时，它显示得很好。当我删除'class =“modal hide fade”'时，图表显示在弹出窗口内，但是弹出窗口不再是弹出窗口，而是页面上的div。

有人看到我可能做错了什么吗？我不确定我可以使用哪些 bootstrap div“类”属性，这将使我能够隐藏弹出窗口，直到单击为止(我在 js 中使用 $('#Pop-Up').modal('show');从隐藏更改为可见)并允许图表显示在其中。

Answer 1

这可能是因为图表插件的原因。由于图表位于隐藏对象内，因此插件无法工作。您必须在模式回调函数内触发图表插件。我的意思是在显示模式窗口后运行图表插件而不是在页面加载时运行。