Modal

Examples

Open Modal One Open Modal Two
<a href="#" id="modalButton" data-target="#exampleModal" data-toggle="modal" class="btn btn-primary">
    Open Modal One </a>


<div class="modal fade " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="Productname" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Productname</h4>
        <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="table ">
          <table>
            <thead>
              <tr>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Name
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Stock
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    MOQ
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Packaging
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			Digi-Key
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			Digi-Key
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			Digi-Key
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="table ">
          <table>
            <thead>
              <tr>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Name
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Stock
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    MOQ
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Packaging
                  </div>
                </th>
              </tr>
            </thead>
            <tbody>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			Digi-Key
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			Digi-Key
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			Digi-Key
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  136
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  1
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  Cut Tape
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">

        <button type="button" data-dismiss="modal" class="btn btn btn-outline-gray">
          Close </button>
      </div>
    </div>
  </div>
</div>

<a href="#" id="modalButton2" data-target="#exampleModal2" data-toggle="modal" class="btn btn-primary">
    Open Modal Two </a>

<div class="modal fade " id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="Request Sample" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Request Sample</h4>
        <button type="button" class="modal-close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="table ">
          <table>
            <thead>
              <tr>

                <th class="table-item-header ">
                  <div class="table-item-header-content">
                    Product
                  </div>
                </th>

                <th class="table-item-header ">
                  <div class="table-item-header-content">

                  </div>
                </th>
              </tr>
            </thead>
            <tbody>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			TMC2130-LA
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">

                  <a href="#" class="btn btn-primary">
    Add to cart </a>
                </td>
              </tr>

              <tr class="table-item-row " data-position="">

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">
                  <a href="#" title="">
			TMC2130-LA
			</a>
                </td>

                <td class="table-item-column " data-value="" data-value-asc="" data-value-desc="">

                  <a href="#" class="btn btn-primary">
    Add to cart </a>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">

        <button type="button" data-dismiss="modal" class="btn btn btn-outline-gray">
          Close </button>
      </div>
    </div>
  </div>
</div>