Web Widget (クラシック) での z-index の使用

Zendesk Web Widget (Classic) には、多くの設定とカスタマイズ オプションが用意されています。Web ページの他のコンテンツとの関係で、Web Widget (Classic) のスタック順序を指定する必要がある場合があります。これを行うには、z-index Web Widget (クラシック) 設定の値。この記事では、いくつかの基本的なケースを取り上げます。z-indexウィジェットが Web サイトの他の要素とどのように配置されるかを変更します。

メモ：以下の例は、私たちが直接サポートしていないカスタム コードであり、Web 開発者が実装する必要があります。この記事と独自の Web Widget の例を表示している場合、一部の例が正しく表示されない場合があります。例を表示するには、矢印アイコン ( ) をクリックして、この記事を新しいブラウザー タブで開きます。

とはz-index?
の説明と定義 z-index

Z-index オーバーラップするコンテンツの可視性と配置を設定するために使用される CSS プロパティです。2 つの要素が重なる場合、z-indexどの要素が他の要素の上に表示されるかを決定します。のz-indexvalue には、inherit、initial、unset などの整数値またはグローバル値を割り当てることができます。

整数を使用する場合、要素のz-index最高のインデックスに割り当てられた要素は、他の要素の前に表示されます。たとえば、コンテナ A にz-indexの 2 であり、コンテナ B にはz-index1 の場合、コンテナ A はコンテナ B の前に配置されます。グローバル値を使用する場合、要素はその親の値に関連して割り当てられた位置を取ります.

どうやってz-indexWeb Widget (Classic) に関連していますか?
設定z-index独自のウィジェット用

コンテンツを Web Widget (Classic) の前面に表示したい場合や、Web Widget (Classic) を他のコンテンツの背後に完全に隠したい場合があります。これは、z-indexの Web Widget (Classic) が重宝します.

設定方法z-index私の Web ウィジェット (クラシック) の場合?
設定のための 2 つのオプション z-index

を設定できます。z-index次の 2 つの方法で Web ウィジェットを作成します。

1. 使用window.zESettings物体。これにより、z-indexウィジェットが最初にロードされたとき。の使用に関する詳細については、window.zESettingsオブジェクトについては、こちらの開発者向けドキュメントをご覧ください。
2. updateSettings API を使用します。これにより、z-index実行時に更新されます。updateSettings API の使用に関する詳細については、こちらの開発者向けドキュメントを参照してください。

メモ：Web ウィジェット (クラシック)z-index設定のデフォルトは 999998 のインデックスです。これは、別のオブジェクトの場合を除き、ウィジェットが画面の前面に表示されることを意味します。z-indexその数を超えています。

window.zESettings オブジェクトの使用例
のwindow.zESettingsオブジェクトで設定できますz-indexページの読み込み時

この例では、z-indexを使用してwindow.zESettings物体。念のため、window.zESettingsオブジェクトは、ウィジェットの起動時にのみロードされます。更新するにはz-indexupdateSettings API を使用して実行時に値を指定します。以下の例を参照してください。

以下は、変更前のページの外観です。z-index Web Widget (Classic) の値。予想どおり、Web Widget (Classic) は他のコンテンツの上に表示されます。

上記の例では、z-indexコンテナ要素の が明示的に設定されていません。つまり、z-indexコンテナ要素のデフォルトは auto で、これは 0 に対応します。Web Widget (Classic) を非表示にするには、z-indexここに示すように、0 より小さい値:

これで、ページが読み込まれると、Web Widget (Classic) がコンテナー要素の背後に表示されます。これは、z-indexコンテナ要素の値がz-indexWeb Widget (Classic) の値。

新しいz-index値により、Web Widget (Classic) が Web ページの他の要素の背後に表示されます。

updateSettings API を使用した例
updateSettings API を使用すると、リアルタイムで柔軟に変更できます

これらの例では、モーダルにz-index2の。変更するのはz-indexウィジェットを非表示にするか、画面の前面に表示します。

例1：モーダルの後ろに Web Widget (Classic) を隠す

最初の例では、Web ウィジェット (クラシック) をモーダルの背後に隠すために、ウィジェットのz-index以下に示すように 1 にします。

実際に見てみましょう:

例2：Web Widget (Classic) をモーダルの前面に移動する

この例では、Web Widget (Classic) をモーダルの前に表示して、ページ上で引き続きアクセスできるようにします。もう一度 zE webWidget を使用して updateSettings を設定し、z-index 3に。これにより、Web Widget (Classic) の位置が効果的に移動します。

実際に見てみましょう:

まとめと追加リソース
詳細については、これらのリンクを参照してください

Web 開発者は、最適な設定方法を選択できます。z-index Web Widget (Classic) の値。のwindow.zESettingsオブジェクトを使用すると、z-index一方、updateSettings API を使用すると、リアルタイムで柔軟に変更できます。ウィジェットのカスタマイズの詳細については、次を参照してください。
Web Widget (クラシック) の高度なカスタマイズ
私たちの開発者コミュニティ

進捗リセット

翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフトウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性については保証いたしません。

翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事を参照してください。