Yii2 将视图渲染为模态,弹出 Window 表单
Yii2 render view as modal, Pop up Window for forms
将视图页面呈现为预览模式:
<h1><?= Html::encode($this->title) ?></h1>
<p>
<?= Html::button('Create Branches', ['value'=>Url::to(['/branches/create']),'class' => 'btn btn-success','id'=> 'modalButton']) ?>
</p>
<?php
Modal::begin([
'header'=>'<h4>Branches</h4>',
'id'=>'modal',
'size'=>'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
我的控制器:
public function actionCreate()
{
return $this->renderAjax('create', [
'model' => $model,
]);
}
我的脚本:
$(function () {
$('#modalButton').click(function () {
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
});
但是当我单击 link 时,它会打开一个没有 CSS 的视图页面,而不是弹出模式。请帮我解决一下这个。谢谢
您可以像这样更新您的代码。
<h1><?= Html::encode($this->title) ?></h1>
<p>
<!-- updated id to class here -->
<a class="modalButton btn btn-success" href="<?=Url::to(['/branches/create']) ?>">
</p>
<?php
Modal::begin([
'header'=>'<h4>Branches</h4>',
'id'=>'modal',
'size'=>'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
更新 Jquery 事件。
$(function(){
// changed id to class
$('.modalButton').on('click', function (){
$.get($(this).attr('href'), function(data) {
$('#modal').modal('show').find('#modalContent').html(data)
});
return false;
});
});
将视图页面呈现为预览模式:
<h1><?= Html::encode($this->title) ?></h1>
<p>
<?= Html::button('Create Branches', ['value'=>Url::to(['/branches/create']),'class' => 'btn btn-success','id'=> 'modalButton']) ?>
</p>
<?php
Modal::begin([
'header'=>'<h4>Branches</h4>',
'id'=>'modal',
'size'=>'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
我的控制器:
public function actionCreate()
{
return $this->renderAjax('create', [
'model' => $model,
]);
}
我的脚本:
$(function () {
$('#modalButton').click(function () {
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
});
});
但是当我单击 link 时,它会打开一个没有 CSS 的视图页面,而不是弹出模式。请帮我解决一下这个。谢谢
您可以像这样更新您的代码。
<h1><?= Html::encode($this->title) ?></h1>
<p>
<!-- updated id to class here -->
<a class="modalButton btn btn-success" href="<?=Url::to(['/branches/create']) ?>">
</p>
<?php
Modal::begin([
'header'=>'<h4>Branches</h4>',
'id'=>'modal',
'size'=>'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
更新 Jquery 事件。
$(function(){
// changed id to class
$('.modalButton').on('click', function (){
$.get($(this).attr('href'), function(data) {
$('#modal').modal('show').find('#modalContent').html(data)
});
return false;
});
});