bootstrap modal not blocking content below

Question

I am using bootstrap to show a simple modal window, for some reason though the modal is not blocking any content below it, so I can still click, write and do whatever I want even when the modal shows. Anyone knows how to change it so it actually blocks all other content?
That is all the code there is to this example (no js files or nothing):

<html>
<head>

    <link href="lib/bootstrap-2.3.2/css/bootstrap.css" rel="stylesheet" />
    <script src="lib/jquery-2.0.3/jquery.js"></script>
    <script src="lib/bootstrap-2.3.2/js/bootstrap.js"></script>

</head>
<body>

<div class="content" >

    <div class="modal" >
        <div class="modal-header">
            <h3>Example title</h3>
        </div>
        <div class="modal-body">example text</div>
        <div class="modal-footer">
            <button class="btn">No</button>
            <button class="btn">Yes</button>
        </div>
    </div>

    <!-- my form with fields etc is here -->
    <label>Example field</label><input type="text"></input>

</div>

</body>
</html>

Here is the result:

result

I have bootstrap css and js files included, given the example below I can still see the text box even tho the modal is showing...

all the code is in the post, in this example I did not have any custom js or css. The popup should always show and block the input box/label... it does show but it does not block. — Daniel Gruszczyk, Feb 03 '14 at 14:32
You may want to use lock / onlock from [this question](http://stackoverflow.com/questions/13421750/twitter-bootstrap-jquery-how-to-temporarily-prevent-the-modal-from-being-clo) and this [example fiddle](http://jsfiddle.net/5d7de/) — davidkonrad, Feb 03 '14 at 14:44
@davidkonrad Thanks for pointing that question/answer out, didn't realise 2.3.2 had no locking API included! — MackieeE, Feb 03 '14 at 14:46

Mini John · Accepted Answer · 2014-02-03T14:45:31.023

3

A previous version of 2.3.2 was broken..

I would recommend you upgrade to Bootstrap 3 and use:

<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />

Or you can use Bootstrap CDN:

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

And the Modal Code

edited Feb 03 '14 at 14:45

answered Feb 03 '14 at 14:39

Mini John

7,855
9
59
108

1

2.3.2 isn't/wasn't broken, it's a **stable** but old release; but yes I'd agree that 3.1.0 is much better and along with built-in Modal locking API. – MackieeE Feb 03 '14 at 14:46
I downloaded 2.3.1 and not the modal doesn't show at all – Daniel Gruszczyk Feb 03 '14 at 15:08
-> http://stackoverflow.com/questions/15364543/bootstrap-2-3-1-modal-with-remote-doesnt-load-first-time-but-does-after-the – Mini John Feb 03 '14 at 15:08
Right, I got somewhere with that 2.3.1 . It does show and block, styling is a little bit messed up, but I guess I can take it from here. Thanks. – Daniel Gruszczyk Feb 03 '14 at 15:15
1

Just as long as you're not using the `remote`, which was deprecated this week in 3.1.0.. ! =) – MackieeE Feb 03 '14 at 15:38

score 3 · Answer 2 · answered Feb 03 '14 at 15:14

You could

add a transparent backdrop manually
specify data-backdrop as static
and trigger the modal by code
modals should btw have role="dialog"

changed markup :

<div id="the-modal" class="modal hide" data-backdrop="static" data-keyboard="false" role="dialog">
   <div class="modal-header">
       <h3>Example title</h3>
   </div>
   ...

css :

.modal-backdrop {
   background-color: transparent;
}

script :

$('#the-modal').on('show', function() {
    $('body').append('<div class="modal-backdrop"></div>');
});
$('#the-modal').on('hide', function() {
    $('body').find('.modal-backdrop').remove();
});
$('#the-modal').modal();

see the above in this fiddle -> http://jsfiddle.net/vB8xq/ which btw runs bootstrap 2.3.2!

score 1 · Answer 3 · answered Feb 03 '14 at 15:08

This is tested in the latest Bootstrap. It will block input in the text field.

<div class="content" >

<div class="modal show">
    <div class="modal-dialog">
        <div class="modal-content" >
            <div class="modal-header">
                <h3>Example title</h3>
            </div>
            <div class="modal-body">example text</div>
            <div class="modal-footer">
                <button class="btn">No</button>
                <button class="btn">Yes</button>
            </div>
        </div>
    </div>
</div>

<!-- my form with fields etc is here -->
<label>Example field</label><input type="text"></input>

</div>

thanks, I downloaded 2.3.1 and it started working but with messed-up styles. I have added div structure as suggested by you and styles are ok. — Daniel Gruszczyk, Feb 03 '14 at 15:21

bootstrap modal not blocking content below

3 Answers3