javascript - Bootstrap: why is my Modal transparent? - Stack Overflow

admin管理员组

文章数量:1289877

I want to use a Modal from the Bootstrap library.

When I click the button, the Modal is displayed, but it is transparent.

I can't figure out why this is.

JSFiddle link: /

This is my 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>

This is my 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
        });
    });

});

I want to use a Modal from the Bootstrap library.

When I click the button, the Modal is displayed, but it is transparent.

I can't figure out why this is.

JSFiddle link: http://jsfiddle/0cqkdjey/

This is my 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>

This is my 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
        });
    });

});

• javascript
• jquery
• css
• twitter-bootstrap

Share Improve this question Follow asked Dec 8, 2014 at 18:24 JNevensJNevens 12k99 gold badges5050 silver badges7373 bronze badges 4

• Can you create a jsfiddle or plunker? – mellis481 Commented Dec 8, 2014 at 18:26
• check that your CSS does not have the property backdrop set to false - Also, are you Boostrap 2.x syntax with Boostrap 3.x libraries? – blurfus Commented Dec 8, 2014 at 18:27
• I have Bootstrap 3. Which part is Bootstrap 2 syntax? – JNevens Commented Dec 8, 2014 at 18:32
• Ah, I see the fiddle now, let me check it – blurfus Commented Dec 8, 2014 at 18:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

Found it:

<div class="model-content">

Should be:

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

That should fix it.

Cheers!

本文标签： javascriptBootstrap why is my Modal transparentStack Overflow