내 웹사이트에 맞춤설정 가능한 Google 번역 모달 레이아웃을 구현하려면 어떻게 해야 하나요?

웹사이트에 Google 번역 추가 - 인터페이스 맞춤설정

Google 번역을 웹사이트에 통합할 때 기본 인라인 레이아웃 또는 더 맞춤설정 가능한 모달이라는 두 가지 옵션이 있습니다. 공들여 나열한 것. Google 번역에서 제시한 코드는 인라인 레이아웃을 제공하지만 모달 레이아웃을 선호하는 경우 html-5-tutorial 웹사이트의 코드를 사용할 수 있습니다.

모달 레이아웃 구현

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. 레이아웃 사용자 정의(선택 사항): .translate 클래스에 CSS 스타일을 추가하여 모달의 모양을 사용자 정의할 수 있습니다. 예:

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

기본 인라인 레이아웃 제거

이미 기본 인라인 레이아웃을 추가한 경우 모달과의 충돌을 방지하려면 이를 제거해야 합니다. 공들여 나열한 것. 에서 다음 코드를 찾으세요. 섹션을 제거하고 제거하세요.

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

참고:

• 모달 레이아웃이 작동하려면 JavaScript가 필요합니다.
• CSS를 조정해야 할 수도 있습니다. 귀하의 웹사이트 디자인에 맞는 스타일을 선택하세요.

위 내용은 내 웹사이트에 맞춤설정 가능한 Google 번역 모달 레이아웃을 구현하려면 어떻게 해야 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!