Question

我想在yii2项目中使用面板，所以我从kartik-v下载帮助器。在面板中我想让一个按钮打开一个弹出窗口或模态，但是有一个问题。模态/弹出窗口仅在第一个面板中工作，但是当我单击第二个面板中的按钮，第三个面板等时，没有任何反应。问题是什么？

这是代码：

<?php
    foreach ($dataProvider->models as $myKandidat)
    {   
        echo '<div class="col-md-4">'
            . Html::panel([
                'body' => '<div class="panel-body ">'
                            . '<div class="row">'
                                . '<div class="col-md-6"><center>'
                                    . Html::img(Yii::getAlias('@web') . '/uploads/' . "{$myKandidat->foto}", ['width' => '129px', 'height' => '150px'])
                                . '</center></div>'
                                . '<div class="col-md-6">'
                                    . '<p>' . "{$myKandidat->nama}" . '<b>--' . "{$myKandidat->noInduk}" . '</b><br />From ' . "{$myKandidat->prodi}" .'</p>'
                                    . '<p class="JustifyFull small"><b>Motivation: </b>' . substr("{$myKandidat->motivasi}", 0, 100)
                                    . '... <br />'
                                    . Html::button('Testing', ['value' => Url::to('index.php?r=kandidat/view&id=' . "{$myKandidat->idKandidat}"), 'class' => 'btn btn-success', 'id' => 'modalButton'])
                                    . '</p>'
                                . '</div>'
                            . '</div>'
                        . '</div>',
                'footer'=> '<center>Panel Footer</center>',
                'footerTitle' => true,
                Html::TYPE_DEFAULT,
            ])
            . '</div>';
    }

    Modal::begin([
        'header' => 'Testing',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>

这是main.js

$(function(){
    // Get the click of the button
    $('#modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

这是我的控制者：

public function actionView($id)
    {
        return $this->render('view', [
            'model' => $this->findModel($id),
        ]);
    }

感谢。

Answer 1

您为按钮分配了ID，但是当你使用循环时，你的id正在重复 id应该是唯一的，或者您可以使用class来显示模态

<?php
    foreach ($dataProvider->models as $myKandidat)
    {   
        echo '<div class="col-md-4">'
            . Html::panel([
                'body' => '<div class="panel-body ">'
                            . '<div class="row">'
                                . '<div class="col-md-6"><center>'
                                    . Html::img(Yii::getAlias('@web') . '/uploads/' . "{$myKandidat->foto}", ['width' => '129px', 'height' => '150px'])
                                . '</center></div>'
                                . '<div class="col-md-6">'
                                    . '<p>' . "{$myKandidat->nama}" . '<b>--' . "{$myKandidat->noInduk}" . '</b><br />From ' . "{$myKandidat->prodi}" .'</p>'
                                    . '<p class="JustifyFull small"><b>Motivation: </b>' . substr("{$myKandidat->motivasi}", 0, 100)
                                    . '... <br />'
                                    . Html::button('Testing', ['value' => Url::to('index.php?r=kandidat/view&id=' . "{$myKandidat->idKandidat}"), 'class' => 'btn btn-success modalButton'])
                                    . '</p>'
                                . '</div>'
                            . '</div>'
                        . '</div>',
                'footer'=> '<center>Panel Footer</center>',
                'footerTitle' => true,
                Html::TYPE_DEFAULT,
            ])
            . '</div>';
    }

    Modal::begin([
        'header' => 'Testing',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>

在main.js中

$(function(){
    // Get the click of the button
    $('.modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

在yii2中不能在面板中使用模态

1 个答案: