Question

我有这个动态创建的bootstrap模式

<div class="modal fade" tabindex="-1" role="dialog" id="dialog">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            Foo
        </div>
        <div class="modal-body">
            Bar
        </div>
        <div class="modal-footer">
        </div>
    </div>
</div>

.modal-footer通过一个对象填充，就像jQuery的对话框

function dialog(opt) {
    $modal.create();
    $modal.on('hidden.bs.modal', function() {
         $(this).remove();
    });
    $modal.find('.modal-footer').append(
    (function(){
        var res = [], key, val;
        for(key in opt.buttons) {
            value = opt.buttons[key];
            res.push(
                (function(key, value) {
                    return $('<button type="button" data-dismiss="modal">').on('click', function() {
                        value();
                    }
                })(key, value)
            );
        }
        return res;
    })()
    );
    $('body').append($modal);
    $modal.modal();
}

所以我可以这样称呼它

dialog({
    buttons: {
        Ok: function() { doSomething(); }
    }
});

问题是.modal.fade在正确的模态周围显示为白色div，阻挡了所有页面的视图。

我展示如何创建它的原因是我在页面中有另一个静态模态，其中包含自定义内容，它正确显示。

两种情况下的功能是相同的，如果我在模态外面点击它就会消失，但是它非常烦人，而且我不想打破另一个使另一个工作。

我没有向模态添加任何自定义css，我正在请求视口

<meta name="viewport" content="width=1024" />

其他的事情，我正在使用IE8和IE11（两者都是一样的）

Boostrap模态显示一个白色的盒子周围

0 个答案: