Bootstrap bootbox覆盖

Question

我正在为我的应用程序使用bootbox插件。

http://bootboxjs.com/

像这样的东西

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    danger: {
      label: "Danger!",
      className: "btn-danger",
      callback: function() {
        Example.show("uh oh, look out!");
      }
    },
    main: {
      label: "Click ME!",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});

我所遇到的问题是，当modal被打开时，动态地添加一些东西到消息中，当modal被打开时，它在页面上向下移动，但是不透明元素黑色保持不变？

​

​

请检查我有问题的图片:(

Answer 1

这更像是Bootstrap Modal的问题，而不是Bootbox的问题。

最干净的解决方案是约束你的模式的内容，而不是试图覆盖Bootstrap的覆盖工作方式。因此，下面是一个包含大量内容的示例jsFiddle：https://jsfiddle.net/17jLxr2n/

如果我们将一个简单的CSS规则集添加到我们的容器中，我们可以很容易地将模型限制为一个可用的大小，如updated fiddle所示

.dynamic-modal-content
{
    max-height: 300px;
    overflow: auto;
}

您使用的选择器应该是与动态内容一起返回的任何容器。