BAPO-104 | Insurance table HTML and modal info boxes

gistfile1.html

<h3>What your policy covers:</h3>

<table class="table table-striped table-bordered">
<tbody>
  <tr align="left">
      <th>Cover</th>
      <th>Limit</th>
  </tr>
  <tr>
      <td>Medical Expenses <a href="#medical" role="button" data-toggle="modal">(details)</a></td>
      <td>£2,000,000</td>
  </tr>
  <tr>
      <td>Personal Liability</td>
      <td>£1,000,000</td>
  </tr>
  <tr>
      <td>Personal Accident</td>
      <td>£30,000</td>
  </tr>
  <tr>
      <td>Overseas Legal Expenses and Assistance</td>
      <td>£10,000</td>
  </tr>
  <tr>
      <td>Course Fees <a href="#coursefees" role="button" data-toggle="modal">(details)</a></td>
      <td>£12,000</td>
  </tr>
  <tr>
      <td>Cancellation cover <a href="#cancellation" role="button" data-toggle="modal">(details)</a></td>
      <td>£3,000</td>
  </tr>
  <tr>
      <td>Baggage in Transit <a href="#baggage" role="button" data-toggle="modal">(details)</a></td>
      <td>£2,000</td>
  </tr>
  <tr>
      <td>Possessions within UK accommodation <a href="#possessions" role="button" data-toggle="modal">(details)</a></td>
      <td>£2,000</td>
  </tr>
  <tr>
      <td>Passport</td>
      <td>£500</td>
  </tr>
  <tr>
      <td>Cash Limit</td>
      <td>£100</td>
  </tr>
</tbody>
</table>
 
<!-- Medical -->
<div id="medical" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Medical Expenses</h3>
  </div>
  <div class="modal-body">
    <p><strong>What it covers:</strong></p>
    <p>Emergency medical treatment. Repatriation to a student's home country if they are seriously ill or injured. Bringing a relative to the student's location to visit following a medical emergency.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

<!-- Course fees -->
<div id="coursefees" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Course Fees</h3>
  </div>
  <div class="modal-body">
    <p><strong>What it covers:</strong></p>
    <p>If a student has to cancel their course, cut it short or repeat it due to accident or sickness of themselves or a close relative; we will reimburse the prepaid fees to the student.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

<!-- Cancellation cover -->
<div id="cancellation" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Cancellation cover</h3>
  </div>
  <div class="modal-body">
    <p><strong>What it covers:</strong></p>
    <p>Cancellation of the course prior to arrival. In the event of accident, illness, sickness or the redundancy of a financially supporting parent the student will be able to claim back the costs of prepaid travel expenses.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

<!-- Baggage in transit -->
<div id="baggage" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Baggage in Transit</h3>
  </div>
  <div class="modal-body">
    <p><strong>What it covers:</strong></p>
    <p>Cover for baggage in transit during travel to and from the country of study. Our research shows that this a key period especially when international students are travelling to a foreign country on their own.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

<!-- Possessions in UK accommodate -->
<div id="possessions" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Possessions within UK accommodation</h3>
  </div>
  <div class="modal-body">
    <p><strong>What it covers:</strong></p>
    <p>Cover includes items such as your jewellery, clothes, watches, glasses, bags, and any other electrical item against theft, accidental damage and loss.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>