title: Data Toggle on Link not Opening Modal
body: <p>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.</p>
  
  <p>The Trigger:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;a data-toggle="modal" href="#tableA"&gt;
          &lt;span id="tableA_icon" class="glyph-wrap"&gt;
              &lt;span class="glyphicon glyphicon-th-list"&gt;&lt;/span&gt;
          &lt;/span&gt;Table A
      &lt;/a&gt;
  </code></pre>
  
  <p>The Modal:</p>
  
  <pre class="lang-html prettyprint-override"><code>    &lt;div class="modal fade" id="tableA" tabindex="-1" role="dialog" link:aria-labelledby="tableA" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                     &lt;h3 class="modal-title"&gt;Table A&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                  Table code goes here (the table does display properly when using another method)
  
  
           &lt;/div&gt;
                 &lt;div class="modal-footer"&gt;
                     &lt;button type="button" class="btn btn-primary"&gt;Print&lt;/button&gt;
                     &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.modal-content --&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>(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?)</p>
  
  <p>The CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>    .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;
      }
  </code></pre>
  
  <p>What am I doing wrong?</p>