I have been struggling for the last several days with Modals for a project at work. The trigger is a link (with a glyphicon to let the user know it's a table) and I am trying to use data toggle on the link to open a modal containing a table. I can't figure out why it's not working.

The Trigger:

```html
    <a data-toggle="modal" href="#tableA">
        <span id="tableA_icon" class="glyph-wrap">
            <span class="glyphicon glyphicon-th-list"></span>
        </span>Table A
    </a>

```

The Modal:

```html
    <div class="modal fade" id="tableA" tabindex="-1" role="dialog" link:aria-labelledby="tableA" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h3 class="modal-title">Table A</h3>
                </div>
                <div class="modal-body">
                Table code goes here (the table does display properly when using another method)

         </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-primary">Print</button>
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

```

(Yes, my supervisor wants the modal to be printable (which I know will be another long pain in the neck), but right now I'm just focused on trying to get the darned Modal to open. I think I'm missing CSS on the footer buttons but that shouldn't be preventing the modal from opening, right?)

The CSS:

```css
    .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #333;
      margin: auto;
      padding: 0;
      border: 1px solid #EEE;
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    }

    /*Modal Header*/
    .modal-header {
      padding: 2px 16px;
      background-color: #EEE;
      color: white;
    }

    /* The Close Button */
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    /* Modal Body */
    .Modal-body {padding: 2px 16px;}

    /* Modal Footer */
    .Modal-footer {
      padding: 2px 16px;
      background-color: #EEE;
      color: white;
    }

    /*The Footer Print Button*/
    .print-btn{
        color: #aaa;
        /*float: right;*/
        display: inline-block;
        font-size: 28px;
        font-weight: bold;
    }

    .print-btn:hover,
    .print-btn:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    /* The Footer Close Button */
    .close-btn {
      color: #aaa;
      /*float: right;*/
      display: inline;
      font-size: 28px;
      font-weight: bold;
    }

    .close-btn:hover,
    .close-btn:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

```

What am I doing wrong?