Bootstrap:为什么我的Modal透明?

时间:2014-12-08 18:24:27

标签: javascript jquery css twitter-bootstrap

我想使用Bootstrap库中的Modal。

单击按钮时,会显示模态,但透明。

我无法弄清楚为什么会这样。

JSFiddle链接: http://jsfiddle.net/0cqkdjey/

这是我的HTML:

<div id="loginWindow" tabindex="-1" role="dialog" class="modal fade" aria-hidden="true">
    <div class="modal-dialog">
        <div class="model-content">
            <div class="modal-header">
                <button type="button" data-dismiss="modal" class="close">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 id="loginLabel" class="modal-title">Log in</h4>
            </div>
            <div class="modal-body">
                <input id="email" type="text">
            </div>
            <div class="modal-footer">
                <p>blablabla</p>
            </div>
        </div>
    </div>
</div>

这是我的JavaScript:

$(document).ready( function() {

    // set focus when modal is opened
    $('#loginWindow').on('shown.bs.modal', function () {
        $('#email').focus();
    });

    // everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
    $('#loginButton').click(function () {
        $('#loginWindow').modal({
            show: true
        });
    });

});

1 个答案:

答案 0 :(得分:11)

找到它:

<div class="model-content">

应该是:

<div class="modal-content"> // Notice the a

那应该解决它。

干杯!