如何启用模态的背景阴影？

Question

I have created a bootstrap modal for registration and login.I found that, when modal pops up background does not get shadowed automatically as it should do while i am using bootstrap modal.I am not able to find the cause of this. I want the background to be a bit darken when modal is opened so that user can focus on modal contents only.I also want modal to position to the center of the screen. So please can anyone tell me how to do this?

following is my modal code ?

                              <!-- Modal -->
  <div class="modal reg_modal " id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"   >
    <div class="modal-dialog" id="reg_outer_div" data-backdrop="true" >
      <div class="modal-content " style="background: white;width:700px;">
        <div class="modal-header" id ="reg_modal_header" style="">
          <button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" align="center" style="color:white;" id="reg_log_modal_header_text">   </h4>
        </div><!--/header-->
         <div class="modal-body" style="background: white;" id="regmodal_body">


          </div><!-- /end modal body-->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Answer 1

Your code seems to work fine.

<a data-toggle="modal" href="#regestration" class="btn btn-primary btn-large">Launch demo modal</a> 

<div class="modal reg_modal " id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"   >
    <div class="modal-dialog" id="reg_outer_div" data-backdrop="true" >
      <div class="modal-content " style="background: white;width:700px;">
        <div class="modal-header" id ="reg_modal_header" style="">
          <button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" align="center" style="color:white;" id="reg_log_modal_header_text">   </h4>
        </div><!--/header-->
         <div class="modal-body" style="background: white;" id="regmodal_body">


          </div><!-- /end modal body-->
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

checkout the fiddle http://jsfiddle.net/x79kS/

Check that you have not included jquery dialog.

Refer http://getbootstrap.com/2.3.2/javascript.html#modals for the documentation