Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 351
Daniel Gruszczyk Avatar asked Feb 03 '14 14:02

Daniel Gruszczyk


2 Answers

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

like image 197
Mini John Avatar answered Nov 13 '22 16:11

Mini John


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!

like image 37
davidkonrad Avatar answered Nov 13 '22 17:11

davidkonrad