How to use model pop-up window in Yii2 (basic use)

This article mainly introduces how to use modal pop-up windows in Yii2 and related basic information. It is very good and has reference value. Friends in need can refer to it

Modal is also a modal window. In layman's terms, it is a pop-up window. It is a bootstrap js plug-in, and the effect is very good.

Needless to say why you should use modal, I don’t believe you if you say you have never used js pop-up windows during the development process of a website! A good pop-up window not only gives people a sense of beauty, but also improves our development efficiency and even makes us feel better!

Let’s see how to use modal in yii2.

For example, when we added data before, we usually click the button to jump to the add page, and then jump to the list page after saving.

Now we hope that when we click the add button, data will be added to the pop-up window on the current page. See the specific implementation.

1、use yii\bootstrap\Modal;

2、创建一个按钮，用于调modal的显示

echo Html::a('创建', '#', [
'id' => 'create',
'data-toggle' => 'modal',
'data-target' => '#create-modal',
'class' => 'btn btn-success',
]);

3、创建modal

<?php 
Modal::begin([
&#39;id&#39; => &#39;create-modal&#39;,
&#39;header&#39; => &#39;<h4 class="modal-title">创建</h4>&#39;,
&#39;footer&#39; => &#39;<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>&#39;,
]); 
$requestUrl = Url::toRoute(&#39;create&#39;);
$js = <<<JS
$.get(&#39;{$requestUrl}&#39;, {},
function (data) {
$(&#39;.modal-body&#39;).html(data);
} 
);
JS;
$this->registerJs($js);
Modal::end(); 
?>

4、修改我们的create操作如下

public function actionCreate()
{
$model = new Test();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect([&#39;index&#39;]);
} else {
return $this->renderAjax(&#39;create&#39;, [
&#39;model&#39; => $model,
]);
}
}

At this time, when we click the button [Create], we will see the modal pop-up window, the screenshot is as follows.

Some students may say that there is no need to load this page asynchronously. Indeed, you can also echo $this->renderAjax(); directly on the page, but you need to be reminded that for this operation, remember to modify the action submitted by the form.

Regarding the use of modal, there are two points that need to be reminded here:

Set the attribute data-toggle="modal" on the control element (such as a button or link), and set data- target="#identifier" or href="#identifier" to specify the specific modal box to be switched (with id="identifier")

Above, we have implemented the basic use of modal in yii2 .

Related recommendations:

Yii implements two methods of adding default values ​​to the model

##

The above is the detailed content of How to use model pop-up window in Yii2 (basic use). For more information, please follow other related articles on the PHP Chinese website!