<p>
  <button class="btn btn-primary"
          data-toggle="modal" data-target="#contactManagementModal" type="button">
    Edit Contact
  </button>
</p>

<div class="modal" id="contactManagementModal" tabindex="-1">
  <div class="modal-dialog modal-lg c-modal c-modal--full-height">
    <div class="c-modal__header c-modal__border">
      <div class="t-title--larger">
        User's Name
      </div>

      <ul class="c-nav c-nav-tabs" data-flexmls="nav-tabs">
        <li class="active"> <a data-toggle="tab" data-target="#details"> Contact Details </a> </li>
        <li> <a data-toggle="tab" data-target="#searches"> Searches/Subscriptions </a> </li>
        <li> <a data-toggle="tab" data-target="#portal"> Portal </a> </li>
        <li> <a data-toggle="tab" data-target="#calendar"> Calendar </a> </li>
        <li> <a data-toggle="tab" data-target="#messages"> Messages </a> </li>
        <li> <a data-toggle="tab" data-target="#forms"> Forms </a> </li>
        <li> <a data-toggle="tab" data-target="#notes"> Notes </a> </li>
        <li> <a data-toggle="tab" data-target="#listingNotes"> Listing Notes </a> </li>
        <li> <a data-toggle="tab" data-target="#links"> Links </a> </li>
        <li> <a data-toggle="tab" data-target="#listingNotes"> Extra One </a> </li>
        <li> <a data-toggle="tab" data-target="#listingNotes"> Extra Two </a> </li>
        <li class="dropdown">
          <a class="c-nav-item--more" data-toggle="dropdown" data-target="#">
            More <span class="flexicon flexicon-90 flexicon-chevron--small"></span>
          </a>
          <ul class="dropdown-menu"> </ul>
        </li>
      </ul>
    </div>

    <div class="c-modal__content tab-content">
      <div class="tab-pane active" id="details"> Contact Details </div>
      <div class="tab-pane" id="searches"> Searches/Subscriptions </div>
      <div class="tab-pane" id="portal"> Portal </div>
      <div class="tab-pane" id="calendar"> Calendar </div>
      <div class="tab-pane" id="messages"> Messages </div>
      <div class="tab-pane" id="forms"> Forms </div>
      <div class="tab-pane" id="notes"> Notes </div>
      <div class="tab-pane" id="listingNotes"> Listing Notes </div>
      <div class="tab-pane" id="links"> Links </div>
    </div>

    <div class="c-modal__footer">
      <button class="btn btn-tertiary" type="button"> Edit </button>
      <button class="btn btn-tertiary" type="button"> Remove </button>
      <button class="btn btn-tertiary" type="button"> Deactivate </button>
      <button class="btn btn-tertiary" type="button"> Transfer </button>
      <button class="btn btn-primary" data-dismiss="modal" type="button"> Close </button>
    </div>
  </div>
</div>

<script>
  $(function () {
    'use strict';

    var MODAL = '#contactManagementModal',
        NAV_TABS = '[data-flexmls=nav-tabs]';

    // Refresh nav-tabs after the modal is shown. This is needed because the
    // width of is zero until the nav-tabs are displayed.
    $(MODAL).on('shown.bs.modal', function () {
      $(NAV_TABS).tab('refresh');
    });
  });
</script>