CODEWITHSUNDEEP
twitter-bootstrapbootstrap-modal
Daniel Gruszczyk
Daniel Gruszczyk

Reputation: 5612

bootstrap modal not blocking content below

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...

Upvotes: 5

Views: 10066

Answers (3)

davidkonrad
davidkonrad

Reputation: 85528

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!

Upvotes: 3

user2845946
user2845946

Reputation: 1815

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>

Upvotes: 1

Mini John
Mini John

Reputation: 7941

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

Upvotes: 3

Related Questions