Wie kann ich ein anpassbares modales Google Translate-Layout auf meiner Website implementieren?

Hinzufügen von Google Translate zu Ihrer Website – Anpassen der Benutzeroberfläche

Bei der Integration von Google Translate in Ihre Website haben Sie zwei Möglichkeiten: das grundlegende Inline-Layout oder das anpassbarere modale Layout Layout. Der Code, den Sie von Google Translate präsentiert haben, stellt das Inline-Layout bereit, aber wenn Sie das modale Layout bevorzugen, können Sie den Code von der HTML-5-Tutorial-Website verwenden.

Implementierung des modalen Layouts

Um das modale Layout mit dem SELECT- und OPTION-Markup zu implementieren, befolgen Sie diese Schritte:

1. Fügen Sie den Google Translate-Code hinzu: Fügen Sie den folgenden Code in das ein. Abschnitt Ihres HTML-Dokuments:

   <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. Erstellen Sie einen DIV-Container: Fügen Sie das folgende DIV zu Ihrem HTML-Dokument hinzu, wo immer das Modal angezeigt werden soll:

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

3. Passen Sie das Layout an (optional): Sie können das Erscheinungsbild des Modals anpassen, indem Sie CSS-Stile zur .translate-Klasse hinzufügen. Zum Beispiel:

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

Entfernen des grundlegenden Inline-Layouts

Wenn Sie das grundlegende Inline-Layout bereits hinzugefügt haben, müssen Sie es entfernen, um Konflikte mit dem Modal zu vermeiden Layout. Suchen Sie den folgenden Code im Abschnitt Ihres HTML-Dokuments und entfernen Sie ihn:

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

Hinweis:

• Das modale Layout erfordert JavaScript, um zu funktionieren.
• Möglicherweise müssen Sie das CSS anpassen Stile passend zum Design Ihrer Website.

Das obige ist der detaillierte Inhalt vonWie kann ich ein anpassbares modales Google Translate-Layout auf meiner Website implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!