我正在尝试打开一个模态并将视图加载到其中。
我可以使用js来实现这一点,但我正试图用一种更简单的方法来实现这一点。
我将bs4与yii2一起使用
我的链接:
<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();
我的控制器:(站点控制器)
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>
实际上,它打开了模态,但没有将视图加载到其中,这至少告诉我模态函数正在工作。
当我删除链接中的数据切换时,视图将加载到单独的页面中,这样我就知道控制器正在独立工作。当我删除数据目标时,什么也没有发生
我不知道如何让href调用控制器和数据属性一起工作。
我的代码和测试基于之前的文章:https://stackoverflow.com/a/40179072/9179908
以下是链接所在视图中的渲染模式:
<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">×</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'));
});
});
谢谢
暂无答案!
目前还没有任何答案,快来回答吧!