8

All of my bootstrap code is working except the modal. The Modal shows, but the entire screen is dark. That is, the modal seems to be "behind" the gray.

  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="assets/js/bootstrap.js"></script>

  <a href="#myModal" data-toggle="modal">Login</a>

  <div id="myModal" class="modal hide fade in" aria-hidden="true">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">X</button>
           <h3 id="myModalLabel">Log in</h3>
       </div>
       <div class="modal-body">
         <p>
            <form class="modal-form" id="loginform" >
              <input type="text" name="username" placeholder="login" id="username">
              <input type="text" name="password" placeholder="password" id="userpassword">
             </form>
          </p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-success">Login</button>
        </div>
   </div>

4 Answers 4

5

It looks like you need to add this to the script right before the < /head >

<script type="text/javascript">
 $(function () { 
    $("#myModal").modal({show:false});
});  
</script>
3

I do not realy understand the problem ?

I just tried your code in jsfiddle : http://jsfiddle.net/zFHAJ/ and everything seems to work fine ?

<!DOCTYPE html>
<html>
    <head>
        <link href="http://moi007.dyndns.org/igestis/theme/iabsis_v2//css/bootstrap.css?2.0-4" rel="stylesheet">
    <link href="http://moi007.dyndns.org/igestis/theme/iabsis_v2//css/bootstrap-responsive.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://moi007.dyndns.org/igestis/theme/iabsis_v2//js/bootstrap.js?2.0-4"></script>
    </head>
    <body>


  <div id="myModal" class="modal hide fade in" aria-hidden="true">
      <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">X</button>
           <h3 id="myModalLabel">Log in</h3>
       </div>
       <div class="modal-body">
            <form class="modal-form" id="loginform" >
              <input type="text" name="username" placeholder="login" id="username">
              <input type="text" name="password" placeholder="password" id="userpassword">
             </form>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-success">Login</button>
        </div>
   </div>

       <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
</body>
</html>​

Maybe you have some other custom css that conflicting the bootstrap one ?

4
  • Reloaded all bootstrap CSS & JS...seemed to fix the problem. Dec 31, 2012 at 18:18
  • 7
    This happened to me too. The cause being the modal was not a direct child of body but was quite deep in the hierarchy. May 8, 2013 at 5:39
  • WOW! Thanks. I am so glad someone ran into this before I did.
    – Mr.Black
    Apr 6, 2014 at 3:12
  • Thanks @PeterSankauskas ! That truly help , I almost became hopeless
    – moovon
    Dec 19, 2015 at 17:39
0

place the bootstrap.js or bootstrap.min.js before

</body> 

0
.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0,0,0,0.5);
}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.