Yii2のモデルポップアップウィンドウの使い方（基本的な使い方）

この記事は、Yii2 でのモーダル ポップアップ ウィンドウの使用方法と関連する基本情報を主に紹介しています。非常に優れており、必要な方は参考にしてください。

平たく言えば、モーダル ウィンドウです。それはポップアップウィンドウです。これはブートストラップ js プラグインであり、効果は非常に優れています。

Web サイトの開発プロセスでモーダルを使用する必要がある理由を説明する必要はありません。JS ポップアップ ウィンドウを使用したことがないと言っても、私は信じません。優れたポップアップ ウィンドウは、人々に美しさを与えるだけでなく、開発効率を向上させ、さらに気分を良くします。

yii2 でモーダルを使用する方法を見てみましょう。

例えば、以前にデータを追加したとき、通常はボタンをクリックして追加ページにジャンプし、保存後にリストページにジャンプします。

ここで、追加ボタンをクリックすると、現在のページのポップアップ ウィンドウにデータが追加されることを期待します。具体的な実装を見てみましょう。

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

このとき、[作成]ボタンをクリックすると、モーダルポップアップウィンドウが表示されます。スクリーンショットは次のとおりです。

一部の学生は、このページを非同期でロードする必要はないと言うかもしれません。実際、$this->renderAjax(); をページ上で直接エコーすることもできますが、この操作ではフォームによって送信されたアクションを忘れずに変更する必要があることに注意してください。

モーダルの使用に関して、ここで注意する必要がある 2 つの点があります:

コントロール要素 (ボタンやリンクなど) に属性 data-toggle="modal" を設定し、data-target= を設定します。 "#identifier" または href ="#identifier" で、切り替えられる特定のモーダル ボックスを指定します (id="identifier" を使用)

上記で、yii2 でのモーダルの基本的な使用方法を実装しました。

関連する推奨事項:

yii デフォルト値を追加するモデルを実装する 2 つの方法

以上がYii2のモデルポップアップウィンドウの使い方（基本的な使い方）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。