bootstrapTable点击弹出查看模态对话框

stevenjin 2018-08-06 03:41:36

求源码，点击表单的查看按钮，可以弹出模态对话框。
界面如下：

    <div>            

            



    <div>

           

    <div class="text-danger lead text-center"><h3 id="mainTitle">订单列表</h3></div>

        <table id="table" class="table table-responsive table-hover table-striped">

            <thead>

                <tr>

                    <th style="text-align: center;" data-field="订单号" tabindex="0">

                        <div class="th-inner ">订单号</div>

                        <div class="fht-cell"></div>

                    </th>

                    <th style="text-align: center;" data-field="姓名" tabindex="0">

                        <div class="th-inner ">姓名</div>

                        <div class="fht-cell"></div>

                    </th>

                    <th style="text-align: center;" data-field="实收金额" tabindex="0">

                        <div class="th-inner ">金额</div>

                        <div class="fht-cell"></div>

                    </th>

                    <th style="text-align: center;" data-field="mid" tabindex="0">

                        <div class="th-inner ">操作</div>

                        <div class="fht-cell"></div>

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr data-index="0">

                    <td style="text-align: center;">3141808000207</td>

                    <td style="text-align: center;">张三                </td>

                    <td style="text-align: center;">757</td>

                    <td style="text-align: center;">

                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tbModal">详情</button>

                    </td>

                </tr>

                <tr data-index="1">

                    <td style="text-align: center;">XPK3141808000208</td>

                    <td style="text-align: center;">小君                </td>

                    <td style="text-align: center;">378</td>

                    <td style="text-align: center;">

                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tbModal">详情</button>

                    </td>

                </tr>

                <tr data-index="2">

                    <td style="text-align: center;">3141808000209</td>

                    <td style="text-align: center;">李红                </td>

                    <td style="text-align: center;">16</td>

                    <td style="text-align: center;">

                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tbModal">详情</button></td>

                </tr>

                <tr data-index="3">

                    <td style="text-align: center;">3141808000211</td>

                    <td style="text-align: center;">王峰              </td>

                    <td style="text-align: center;">200</td>

                    <td style="text-align: center;">

                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tbModal">详情</button></td>

                </tr>

                <tr data-index="4">

                    <td style="text-align: center;">3141808000212</td>

                    <td style="text-align: center;">陈二              </td>

                    <td style="text-align: center;">299</td>

                    <td style="text-align: center;">

                        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#tbModal">详情</button>

                    </td>

                </tr>

            </tbody>

        </table> 

    </div>

    <div class="modal fade" id="tbModal" tabindex="1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true" data-backdrop="static">

        <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">×</span></button>

              <h4 class="modal-title" id="ModalLabel">订单详情:</h4>

          </div>

              <div class="modal-body">

            <textarea class="form-control" id="message-text" rows="5" readonly="readonly"></textarea>

          </div>

          <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

           </div>

         </div>

        </div>

    </div>

        </div>