Yii2 Modal link 不调用控制器

Question

我正在尝试打开模态框并将视图加载到其中。

我可以使用 JS 来完成此操作，但我正在尝试使用更简单的方法来完成此操作。

我在 Yii2 中使用 BS4

我的link:

<a data-toggle="modal" data-target="#modal-contact-us" href="<?= Url::to(['site/contact-us']) ?>">Contact Us</a>

我的模态：

Modal::begin(
        [
                'options' => [
                        'id' => 'modal-contact-us'
                ]
        ]
);
echo "<div id='modalContent'></div>";
Modal::end();

我的控制器：(SiteController)

public function actionContactUs()
    {
        $model = new ContactUsForm();
        return $this->renderAjax('_contactUs');
    }

我的看法：(_contactUs)

<div class="row">
    <div class="col-12">
        <p>
            Ok It's working
        </p>
    </div>
</div>

实际上，它打开了模态框，但没有将视图加载到其中，这至少告诉我模态函数正在运行。

当我删除 link 中的数据切换时，视图会在单独的页面中加载，因此我知道控制器正在独立工作。当我删除数据目标时，什么也没有发生

我不确定如何让 href 调用控制器和数据属性一起工作。

我的代码基于之前的 post 进行测试：

这是 link 所在视图中呈现的模态：

<div id="modal-contact-us" class="fade modal" role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="modal-contact-us-label">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-header">
               <h5 id="modal-contact-us-label" class="modal-title">Contact US</h5>
               <button type="button" class="close" data-dismiss="modal">
                   <span aria-hidden="true">&times;</span>
               </button>
           </div>
           <div class="modal-body">
               <div id='modalContent'></div>
           </div>
       </div>
   </div>
</div>

在正确方向上的任何一点都将不胜感激。我再次可以并且已经使用 JS 做到了这一点：

<a href="<?= Url::to(['site/contact-us']) ?>" class='show_contact_us_modal'>Contact Us</a>
$(function(){
      $(document).on('click', '.show_contact_us_modal', function(){
          $('#modal_contact_us').modal('show')
              .find('#modalContent')
              .load($(this).attr('value'));
    });
});

谢谢

Answer 1

模态小部件不会自行加载任何内容。你可以添加事件监听器来预加载内容

<a data-toggle="modal" data-target="#modal-contact-us">Contact Us</a>

<?php
Modal::begin([
  'options' => [
    'id' => 'modal-contact-us'
  ]
]);
Modal::end();
?>

<script>
$('#modal-contact-us').on('show.bs.modal', function (e) {
  $('#modal-contact-us .modal-body').load('<?= Url::to(['site/contact-us']) ?>');
});
</script>

Yii2 Modal link 不调用控制器

Yii2 Modal link not calling controller

jquery

bootstrap-modal

yii2

bootstrap-4