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

时间:2013-10-28 07:22:09

标签: javascript jquery html css twitter-bootstrap

我已经创建了一个用于注册和登录的引导模式。我发现,当模态弹出背景时不会自动阴影,因为它应该在我使用bootstrap模式时做。我无法找到原因。 我希望打开模态时背景有点暗,这样用户只能专注于模态内容。我还希望模态定位到屏幕的中心。所以,任何人都可以告诉我如何做到这一点?

以下是我的模态代码?

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

1 个答案:

答案 0 :(得分:0)

您的代码似乎运行正常。

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

结帐小提琴http://jsfiddle.net/x79kS/

检查您是否未包含jquery对话框。

请参阅http://getbootstrap.com/2.3.2/javascript.html#modals了解文档