Bootstrap模态框内容过多致页面异常，菜单功能受限求助

我使用常规Bootstrap模态框展示信息，内容较少时可正常运行，但当模态框主体内容过多时会导致页面异常。此外还发现，页面加载完成后，菜单系统在模态框打开并关闭前无法正常工作。

内容较少时的正常模态框代码 #

<div class="modal fade" id="modal1" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hourly Jobs Information</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
 <h4><u>Hourly Contracts</u></h4>
          <p>We currently charge £25.00 per hour for jobs undertaken (with the first hour
            paid in full, regardless of completion time), then every hour entered into paid as a full hour.
            (e.g., If a shelf construction job takes 95 minutes, the team members time will be charged at
            £50.00.)</p>
            
            <p>However, if any hour (after the first hour) entered into does not go beyond the first half hour
            stage, a reduced fee of £15.00 will be charged for that shorter half hour.</p>
            
            <p>(e.g., If a painting job takes 75 minutes, the team members time will be charged at £40.00.)</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="button2" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div> 

内容过多后的异常模态框代码 #

<div class="modal fade" id="modal1" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Hourly Jobs Information</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
<h4><u>Hourly Contracts</u></h4>
      <p>We currently charge £25.00 per hour for jobs undertaken (with the first hour
        paid in full, regardless of completion time), then every hour entered into paid as a full hour.
        (e.g., If a shelf construction job takes 95 minutes, the team members time will be charged at
        £50.00.)</p>
        
        <p>However, if any hour (after the first hour) entered into does not go beyond the first half hour
        stage, a reduced fee of £15.00 will be charged for that shorter half hour.</p>
        
        <p>(e.g., If a painting job takes 75 minutes, the team members time will be charged at £40.00.)</p>
        
        <h4><u>Materials</u></h4>
        <p>If materials are required for a job in advance the client can choose to
        either purchase these in advance for the team member, or the team member can purchase the
        necessary materials. The team member will discuss materials required with the client and costs
        can be agreed before the job begins. However, the client will be charged a one-off fee of £15.00
        for the time it takes the team member to purchase, order, collect the materials on their behalf.</p>
        
        <h4><u>Payment</u></h4>
        <p>Once the job has been completed, payment for the work done will be made with the team
        member there and then. We accept cash and card payments (sorry, no cheques) and are happy
        to provide a receipt for works completed, both physically and/or by email.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="button2" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div> 

内容的提问来源于stack exchange，提问作者Dauntless0