Comment utiliser la fenêtre contextuelle du modèle dans Yii2 (utilisation de base)

Cet article présente principalement comment utiliser les fenêtres contextuelles modales dans Yii2 et les informations de base associées. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Modal est également une fenêtre modale. . En termes simples, il s'agit d'une fenêtre pop-up. C'est un plug-in bootstrap js, et l'effet est très bon.

Inutile de vous dire pourquoi vous devriez utiliser modal, je ne vous crois pas si vous dites que vous n'avez jamais utilisé de fenêtres pop-up js lors du développement d'un site web ! Une bonne fenêtre pop-up donne non seulement aux gens un sentiment de beauté, mais améliore également notre efficacité de développement et nous fait même nous sentir mieux !

Voyons comment utiliser le modal dans yii2.

Par exemple, lorsque nous avons ajouté des données auparavant, nous cliquons généralement sur le bouton pour accéder à la page d'ajout, puis passons à la page de liste après l'enregistrement.

Maintenant, nous voulons ajouter des données dans la fenêtre contextuelle de la page actuelle lorsque nous cliquons sur le bouton Ajouter. Voyons l'implémentation spécifique.

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,
]);
}
}

À ce moment-là, lorsque nous cliquons sur le bouton [Créer], nous verrons la fenêtre contextuelle modale, la capture d'écran est la suivante.

Certains étudiants diront peut-être qu'il n'est pas nécessaire de charger cette page de manière asynchrone. En effet, vous pouvez également echo $this->renderAjax(); directement sur la page, mais rappelez-vous que pour cette opération, pensez à modifier l'action soumise par le formulaire.

Concernant l'utilisation du modal, il y a deux points à rappeler ici :

Définissez l'attribut data-toggle="modal" sur l'élément de contrôle (comme un bouton ou un lien ), et définissez data- target="#identifier" ou href="#identifier" pour spécifier la boîte modale spécifique à changer (avec id="identifier")

Ci-dessus, nous avons implémenté l'utilisation de base de modal dans yii2 .

Recommandations associées :

Yii implémente deux méthodes d'ajout de valeurs par défaut aux modèles

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!