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>