Comment puis-je implémenter une mise en page modale Google Translate personnalisable sur mon site Web ?

Ajout de Google Translate à votre site Web - Personnalisation de l'interface

Lors de l'intégration de Google Translate dans votre site Web, vous avez deux options : la mise en page en ligne de base ou la modale plus personnalisable mise en page. Le code que vous avez présenté à partir de Google Translate fournit la mise en page en ligne, mais si vous préférez la mise en page modale, vous pouvez utiliser le code du site Web du didacticiel html-5.

Implémentation de la mise en page modale

Pour implémenter la disposition modale avec le balisage SELECT et OPTION, procédez comme suit :

1. Ajoutez le code Google Translate : Incluez le code suivant dans le champ de votre document 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. Créez un conteneur DIV : Ajoutez le DIV suivant à votre document HTML, partout où vous souhaitez que le modal apparaisse :

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

3. Personnaliser la mise en page (facultatif) : Vous pouvez personnaliser l'apparence du modal en ajoutant des styles CSS à la classe .translate. Par exemple :

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

Suppression de la mise en page de base en ligne

Si vous avez déjà ajouté la mise en page de base en ligne, vous devez la supprimer pour éviter les conflits avec le modal mise en page. Recherchez le code suivant dans le champ section de votre document HTML et supprimez-la :

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

Remarque :

• La mise en page modale nécessite JavaScript pour fonctionner.
• Vous devrez peut-être ajuster le CSS styles adaptés au design de votre site Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!