How to use modal pop-up window in Yii2 (basic use), use modal pop-up window in yii2_PHP tutorial

How to use modal pop-up window in Yii2 (basic use), yii2 uses modal pop-up window

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.

There is no need to explain why you should use modal. During the development process of a website, I wouldn’t believe you if you said you have never used js pop-up windows! 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 would 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

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

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

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

At this time, when we click the button [Create], you 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:

Set the attribute data-toggle="modal" on a 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.