yii2でポップアップレイヤーを設定する方法-YII-php.cn

yii2でポップアップレイヤーを設定する方法

(*-*)浩

リリース： 2019-12-14 10:49:59

オリジナル

2450 人が閲覧しました

yii2でポップアップレイヤーを設定する方法

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

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

# yii2 で MODAL を使用する方法を見てみましょう。

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

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

1. yii\bootstrap\Modal を使用します; 2. モーダル表示を調整するボタンを作成します

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

ログイン後にコピー

3. ボタンにクリックイベントを追加します

$requestUrl = Url::toRoute(&#39;create&#39;);
$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. 3 番目のステップで [作成] ボタンをクリックすると非同期でデータがリクエストされることがわかりましたので、リクエストの操作メソッドを次のように変更します

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

ログイン後にコピー

5。 [作成] ボタンをクリックすると、以下のスクリーンショットに示すように、モーダルポップアップウィンドウが表示されます。

yii2でポップアップレイヤーを設定する方法