Comment configurer la couche contextuelle dans yii2

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

Il n'est pas nécessaire d'en dire plus sur les raisons pour lesquelles vous devriez utiliser modal Lors du processus de développement d'un site Web, je ne vous crois pas si vous dites que vous n'avez jamais utilisé de fenêtres pop-up js ! 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 ! (Apprentissage recommandé : framework YII )

Voyons comment utiliser 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. utilisez yiibootstrapModal; 2. Créez un bouton pour ajuster l'affichage du modal

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

3. >

$requestUrl = Url::toRoute('create');
$js = <<<JS
    $(document).on(&#39;click&#39;, &#39;#create&#39;, function () {
        $.get(&#39;{$requestUrl}&#39;, {},
            function (data) {
                $(&#39;.modal-body&#39;).html(data);
            }  
        );
    });
JS;
$this->registerJs($js);

4. Nous avons vu dans la troisième étape que cliquer sur le bouton [Créer] demanderait des données de manière asynchrone. Nous modifions la méthode d'opération de requête comme suit

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

5. cliquez sur le bouton [Créer] , vous verrez la fenêtre contextuelle modale, la capture d'écran est la suivante.

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!