Zendesk Web Widget（Classic）には、多くの設定とカスタマイズオプションが用意されています。場合によっては、Web Widget（Classic）のスタック順序を、Webページ上の他のコンテンツとの関連で指定する必要があります。これを行うには、 z-indexWeb Widget（Classic）設定の値。この記事では、 z-indexWebサイト上の他の要素とウィジェットの配置を変更します。
）をWeb Widgetの右上に表示し、新しいブラウザタブでこの記事を開きます。 とは z-index？
説明と定義 z-index
Z-index は、重なり合うコンテンツの表示と位置を設定するために使用されるCSSプロパティです。2つの要素が重なる場合、 z-indexは、他の要素の上に表示される要素を決定します。の z-indexvalueには、整数、またはinherit、initial、unsetなどのグローバル値を割り当てることができます。
整数を使用する場合、要素の z-index最も高いインデックスに割り当てられた要素は、他の要素の前に表示されます。たとえば、コンテナAに z-indexコンテナBに割り当てられた z-indexの場合、コンテナAはコンテナBの前に配置されます。グローバル値を使用する場合、要素は親の値に対して割り当てられた位置をとります。。
どのように z-indexWeb Widget（Classic）に関連していますか？
設定 z-indexウィジェットを作成する
Web Widget（Classic）の前にコンテンツを表示したい場合や、Web Widget（Classic）を完全に他のコンテンツの背後に隠したい場合があります。ここで、 z-indexWeb Widget（Classic）の。
設定方法 z-indexWeb Widget（Classic）の場合
2つの設定オプション z-index
設定できるのは z-indexWeb Widgetの場合、
- を使用
window.zESettingsオブジェクトです。これにより、z-indexウィジェットが最初に読み込まれたとき。の使用について詳しくは、window.zESettingsオブジェクトについては、 こちらの開発者ドキュメントを参照してください。 - updateSettings APIを使用します。これにより、
z-index実行時に更新されます。updateSettings APIの使用について詳しくは、開発者向けドキュメントを 参照してください。
z-indexデフォルトのインデックスを999998に設定すると、別のオブジェクトのウィジェットがない限り、ウィジェットは画面の前面に表示されます。 z-indexがその数を超えています。window.zESettingsオブジェクトの使用例
の window.zESettings オブジェクトを使用して z-indexページ読み込み時
この例では、 z-indexを使用して window.zESettingsオブジェクトです。なお、 window.zESettingsオブジェクトはウィジェットの起動時にのみ読み込まれます。を更新するには z-index値を実行時に更新する方法については、後述の例を参照してください。
以下は、変更を加える前のページの外観です。 z-indexWeb Widget（Classic）の値。予想どおり、Web Widget（Classic）は他のコンテンツの上に表示されます。
上記の例では、 z-indexのコンテナ要素が明示的に設定されていません。つまり、 z-indexコンテナ要素の「」はデフォルトで「自動」に設定され、0に対応します。Web Widget（クラシック）を非表示にするには、 z-index以下に示すように、値が0より小さい場合：
これで、ページが読み込まれると、Web Widget（Classic）がコンテナ要素の背後に表示されます。これは、 z-indexコンテナ要素の値が z-indexWeb Widget（Classic）の値。
新しい z-index値を指定すると、Web Widget（クラシック）がWebページの他の要素の背後に表示されます。
updateSettings APIを使用した例
updateSettings APIは、リアルタイムで変更を行うための柔軟性を提供します
これらの例では、モーダルに z-indexの2。変更するのは z-indexウィジェットを非表示にするか、画面の前面に表示します。
例1：Web Widget（Classic）をモーダルの背後に隠す
最初の例では、Web Widget（Classic）をモーダルの背後に隠すために、ウィジェットの z-index1に変更します。
実際の動作を見る：
例2：Web Widget（Classic）をモーダルの最前面に表示する
この例では、Web Widget（Classic）をモーダルの前に表示して、ページ上で引き続きアクセスできるようにします。もう一度、zE webWidgetを使用してupdateSettingsを設定し、 z-indexを3に変更します。これにより、Web Widget（Classic）の位置が効果的に移動します。
実際の動作を見る：
概要とその他のリソース
詳細については、以下のリンクを参照してください。
Web開発者は、最適な方法を選択して z-indexWeb Widget（Classic）の値。の window.zESettings オブジェクトを使用して z-index一方、updateSettings APIでは、リアルタイムで柔軟に変更を行うことができます。ウィジェットのカスタマイズの詳細については、以下を参照してください。
Web Widget（Classic）の高度なカスタマイズ
開発者コミュニティ
翻訳に関する免責事項：この記事は、お客様の利便性のために自動翻訳ソフトウェアによって翻訳されたものです。Zendeskでは、翻訳の正確さを期すために相応の努力を払っておりますが、翻訳の正確性については保証いたしません。
翻訳された記事の内容の正確性に関して疑問が生じた場合は、正式版である英語の記事を参照してください。
0 コメント
サインインしてコメントを残してください。