如何避免對背景內容產生模態影響？

Question

我創建了一個彈出的模式，同時點擊一個按鈕。我的問題是，當模式彈出時，背景內容會有點擴散，有時會自動向下滾動。我已經搜尋了很多解決這個問題，但我無法找到它的解決方案。所以，請任何人都可以告訴我我在哪裏犯錯，如何克服它？

這是我的示例代碼模式：

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

在你的JavaScript文件，添加preventDefault（）以按鈕，以防止頁面滾動，當你點擊按鈕。

$(".button").click(function(e) { 
    e.preventDefault(); 
}