如何在codeigniter中打开一个对话框？

Question

我正在为我的项目使用 codeigniter。我对 ajax 不太熟悉。我有一个表格格式的用户列表。对于每一行，都有一个按钮可以查看每个用户的详细信息。单击按钮时，我想要一个对话框以表格格式显示用户的所有详细信息。任何人都可以用代码告诉我它是如何完成的吗？我的代码是这样的：

<button class="btn btn-default btn-rounded btn-sm product_detail"   id="<?=$record->serviceId;?>"  data-toggle="tooltip" title="View Product" >
        <span class="fa fa-eye"></span>
</button>

<div class="modal fade" id="header-modal" aria-hidden="true"></div>

    <script>    
            $('body').delegate('.product_detail', 'click', function() {
               var serviceId = $(this).attr('serviceId');
               $.ajax({
                type: "POST",
                url: "<?= base_url();?>service/popup",
                data: {serviceId: serviceId},
                dataType: "json",
                success: function(data) {
                                $("#header-modal").html("<div class='modal-dialog modal-lg'>"+
                                                "<div class='modal-content'>" +
                                                        "<div class='modal-header'>" +
                                                                "<button type='' class='close' data-dismiss='modal' aria-hidden='true'><i class='icons-office-52'>Close</i></button>" +
                                                                "<h4 class='modal-title'><strong>Product Detail</strong></h4>" +
                                                        "</div>" +
                                                        "<div class='modal-body' id='modal_body'>" +

                                                        "</div>" +
                                                        "<div class='modal-footer'> " +
                                                             "<button type='button' class='btn btn-danger  btn-embossed bnt-square' data-dismiss='modal'>Cancle</button>" +
                                                        "</div>" +
                                                "</div>"+
                                        "</div>"
                                    );
                                    $('#header-modal').modal('show');
                }
            });

            });
    </script>

控制器代码：

    public function popup()
        {
            $serviceId = $this->input->post('serviceId');
            $data['serviceInfo'] = $this->product->getServiceById($serviceId);

            echo json_encode($data);
        }

我的视图中也包含了 js 和 css 文件。

Answer 1

只需尝试在按钮单击和 onclick 功能上打开模式，即可获取您希望在模式中显示的用户的所有详细信息。

<button type="button" class="btn btn-default btn-rounded btn-sm product_detail" data-target="#editPermission" data-toggle="modal" onclick="yourfunction('pass id here')">
        <span class="fa fa-eye"></span>
</button>

data-target 用于您的模态 ID，在 onclick 中调用您的函数。

Answer 2

Html 部分是

<table>
        <thead>
            <tr>
                <th>
                    Product Id
                </th>
                <th>
                    Product Name
                </th>
                <th>
                    Product Description
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="prod_id">1</td>
                <td class="prod_name">Apple</td>
                <td class="prod_desc">Frout</td>
                <td><button type="button" class="viewBtn">View</button></td>
            </tr>
            <tr>
                <td class="prod_id">2</td>
                <td class="prod_name">Orange</td>
                <td class="prod_desc">Frout</td>
                <td><button type="button" class="viewBtn">View</button></td>
            </tr>
        </tbody>
    </table>
    <div class="modal fade" id="header-modal" aria-hidden="true">
        <div class='modal-dialog modal-lg'>
            <div class='modal-content'>
                <div class='modal-header'>
                    <button type='' class='close' data-dismiss='modal' aria-hidden='true'><i class='icons-office-52'>Close</i></button>
                    <h4 class='modal-title'><strong>Product Detail</strong></h4>
                </div>
                <div class='modal-body' id='modal_body'>
                    Product Id : <span class="modal_prod_id"></span><br/>
                    Product Name : <span class="modal_prod_name"></span><br/>
                    Product Desc : <span class="modal_prod_desc"></span><br/>
                </div>
                <div class='modal-footer'>
                    <button type='button' class='btn btn-danger  btn-embossed bnt-square' data-dismiss='modal'>Cancle</button>
                </div>
            </div>
        </div>
    </div>

脚本部分是

<script>
        $(document).ready(function() {

            $('.viewBtn').click(function(event) {
                /* Act on the event */
                var cur = $(this);
                var id = cur.closest('.prod_id').text();
                var name = cur.closest('.prod_name').text();
                var desc = cur.closest('.prod_desc').text();
                $('.modal_prod_id').text(id);
                $('.modal_prod_name').text(name);
                $('.modal_prod_desc').text(desc);
                $('#header-modal').modal('show');
            });
        });
    </script>