Jiemaローコード|モーダルモーダルボックスコンポーネント詳細解説

知識の補足:

モーダル コンポーネントは、ユーザー インターフェイスに表示される特別なタイプのコンポーネントです。これらは、アプリの残りの部分がブロックまたは一時停止されている間に、特定のタスクや操作をユーザーにガイドするように設計されています。

一般的なモーダル コンポーネントには次のものがあります。

1. ポップアップ: ポップアップは、ユーザー インターフェイスに新しいウィンドウまたはパネルをポップアップして、フォームへの入力や操作の確認などの特定のタスクをユーザーにガイドする一般的なモーダル コンポーネントです。

2. ダイアログ: ダイアログは、ユーザー インターフェイスにダイアログを表示して、ユーザーが意思決定を行ったり情報を収集したりできるようにするために使用されるモーダル コンポーネントです。共通ダイアログ ボックスには、警告ボックス、確認ボックス、入力ボックスが含まれます。

3. モーダル ボックス (モーダル): モーダル ボックスは一般的なモーダル コンポーネントであり、ユーザー インターフェイスにフローティング ボックスを表示して、ユーザーが特定のタスクや操作を実行するようにガイドします。

モーダル ボックス:現在のページでポップアップ ウィンドウを開きます。これは、単純な確認ボックス、複雑なフォーム、Iframe など、ポップアップ ウィンドウ内のコンテンツのカスタマイズをサポートします。

1. 使用方法

1. ショートカット コードにログインします。

アカウントをお持ちでない場合は、クリックして無料アカウントを取得してください: http://dev.gemcoder.com/front/development/index.html#/login

2. アプリケーションとページを作成します。

3. Modal コンポーネントを見つけて、ページ (通常は最も外側のレイヤー) にドラッグ アンド ドロップします。

4. 一般的な設定を実行します: タイトル、下部、ドラッグ、閉じるボタンなど。

5. スタイルを設定します: 幅、zIndex、マスクレイヤーを垂直中央に表示するかどうかを設定し、詳細設定でスタイルを設定することもできます; カスタム スタイルで CSS スタイルを記述することもできます。

2. 物件紹介 

3. 応用シナリオ

モーダル モーダル ボックス コンポーネントでユーザーが処理する必要があり、ページにジャンプしてワークフローを中断したくない場合は、これを使用して現在のページの Modal 中央にフローティング レイヤーを開き、対応する操作を実行できます。ユーザーに簡潔な確認ボックスが必要な場合にも使用できます。

1.初期化のデフォルト表示をサポート

効果:

構成:

 

2. 非表示の下部コンテンツ設定をサポート

効果:

 構成:

 3. ドラッグをサポート

効果:

 構成:

 

4.クリックマスクをサポートして閉じる

効果:

構成:

 

5. 閉じるときにモーダル内の子要素の破棄をサポートします。

効果 - 閉じる前:

効果 - 閉店後:

 構成:

 

おすすめ

転載: blog.csdn.net/Gemcoder/article/details/132055238