カスタマイズ可能な Google 翻訳モーダル レイアウトをウェブサイトに実装するにはどうすればよいですか?

ウェブサイトへの Google 翻訳の追加 - インターフェースのカスタマイズ

Google 翻訳をウェブサイトに統合する場合、基本的なインライン レイアウトまたはよりカスタマイズ可能なモーダルの 2 つのオプションがあります。レイアウト。 Google 翻訳から提示されたコードはインライン レイアウトを提供しますが、モーダル レイアウトを希望する場合は、html-5-tutorial Web サイトのコードを使用できます。

モーダル レイアウトの実装

SELECT および OPTION マークアップを使用してモーダル レイアウトを実装するには、次の手順に従います。

1. Google 翻訳コードを追加します。 次のコードを に含めます。 HTML ドキュメントのセクション:

   <code class="html"><div id="google_translate_element"></div>
   <script>
       function googleTranslateElementInit() {
           new google.translate.TranslateElement(
               {pageLanguage: 'en'},
               'google_translate_element'
           );
       }
   </script>
   <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></code>

2. DIV コンテナを作成します: HTML ドキュメントのモーダルを表示したい場所に次の DIV を追加します。

   <code class="html"><div class="translate">
       <div id="google_translate_element"></div>
   </div></code>

3. レイアウトをカスタマイズする (オプション): CSS スタイルを .translate クラスに追加することで、モーダルの外観をカスタマイズできます。例:

   <code class="css">.translate {
       position: absolute;
       top: 100px;
       right: 0;
       z-index: 9999;
   }</code>

基本インライン レイアウトの削除

基本インライン レイアウトを既に追加している場合は、モーダルとの競合を防ぐためにそれを削除する必要があります。レイアウト。 で次のコードを見つけます。 HTML ドキュメントのセクションを削除して削除します:

<code class="html"><meta name="google-translate-customization" content="9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c"></code>

注:

• モーダル レイアウトが機能するには JavaScript が必要です。
• CSS の調整が必要な場合があります。ウェブサイトのデザインに合わせたスタイル。

以上がカスタマイズ可能な Google 翻訳モーダル レイアウトをウェブサイトに実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。