Question

我想将视图页面渲染为预览模式

<div>
 <?php foreach($softs as $soft) { ?>
  <a id="modalButton" href="<?=Url::to(['documents/view', 'id'=>$soft->id]); ?>"><h3><?=$soft->title; ?></h3></a>
  <?php 
    Modal::begin([
        'header' => 'Test',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>
  <?php } ?>
</div>

我的控制器

 public function actionIndex()
    {
        $query = Documents::find();
        $softs = $query->where(['type_id' => 2])->all();
    return $this->render('index', [
            'softs' => $softs,
        ]);
    }    

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

我的剧本

$(function(){
    $('#modalButton').click(function (){
        $('#modal').modal('show')
        .find('#modalContent')
        .load($(this).attr('href'));
    });
});

但是当我点击链接时，它会打开一个没有CSS的视图页面，而不是弹出模式。

请帮我解决这个问题。谢谢

Answer 1

您可以按照以下方式更新代码。

<div>
 <?php foreach($softs as $soft) { ?>
  <!-- updated id to class here -->
  <a class="modalButton" href="<?=Url::to(['documents/view', 'id'=>$soft->id]); ?>"><h3><?=$soft->title; ?></h3></a>
  <?php } ?>

  <!-- We don't need to print modal popup multiple times -->
  <?php 
    Modal::begin([
        'header' => 'Test',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>

</div>

更新点击事件。

$(function(){
    // changed id to class
    $('.modalButton').click(function (){
        $.get($(this).attr('href'), function(data) {
          $('#modal').modal('show').find('#modalContent').html(data)
       });
       return false;
    });
});

Yii2渲染视图为模态

1 个答案: