JqueryUI和bootstrap干扰对话框显示

Question

我遇到了让jqueryUI和bootstrap一起工作的问题。

此处示例 https://jsfiddle.net/2hcwxudd/1/

我的代码：

<div id="dialog" title="Welcome">
    <h1>Hello World</h1>
</div>

$(function () {
$("#dialog").dialog({
    show: {
        effect: "fold",
            duration: 500
        },

    });
});

你可以在对话框中看到动画结尾处有一个小的调整大小事件看起来很可怕。我似乎无法弄清楚导致它的原因或解决方法，但删除bootstrap可以解决问题。

我尝试过noConflict（这不是它导致它的cs的js），我尝试使用各种主题似乎都有同样的问题。

非常感谢任何帮助

Answer 1

这是对话框宽度的问题，

黑客定义min-width，

.ui-dialog {
    min-width: 300px;
}

Updated Fiddle

Answer 2

这是由于box-sizing在引导中，您必须unset box-sizing属性，

.ui-dialog,.ui-dialog *{
    box-sizing:unset !important;
}

Demo