Блог

Главная - Вопросы по программированию - Как выбрать язык (английский / французский) во всплывающем окне?

Как выбрать язык (английский / французский) во всплывающем окне?

#javascript #html #web #popup #popupwindow

#javascript #HTML #веб #всплывающее #popupwindow

Вопрос:

 <body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle('show');
}
</script>

</body>

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

Я пытаюсь создать всплывающее окно таким образом, как показано ниже на изображениях, и следуя процедурам из ссылки w3shools, на которую, если кто-то нажмет:

Нажмите, чтобы я переключил всплывающее окно

Он должен отображать:

Английский (если на странице отображается французский язык)

Французский (если на странице отображается английский язык)

Нажатие на английский отобразит всю веб-страницу на английском языке, а нажатие на французский отобразит всю веб-страницу на французском языке. У меня уже есть JS-файлы, в которых каждый текст переведен с английского на французский и с французского на английский. Фрагменты этого :

 define([],function(){
var exports = {
//////////////////////////////////
// Enter each key value pair as //
// "key" : "value" ,            //
//////////////////////////////////
// Do not edit above this line  //
//////////////////////////////////
"unspecified": "Unspecified",
"yes": "Yes",
"no": "No",
"error.notify": "An error has occurred. Please contact your plan administrator.",
"error.application": "Error: 500",

"english": "English",
"french": "French",

"m": "Male",
"f": "Female",

"smoker": "smoker",
"non-smoker": "non-smoker",
//////////////////////////////////
// Do not edit below this line  //
//////////////////////////////////
};
return exports;
});

Английский

Французский

Ответ №1:

Что-то вроде этого?

 function myFunction() {
  var popup = document.getElementById('myPopup');
  popup.classList.toggle('show')
  if (!popup.classList.toggle('show')) {
    if (popup.innerHTML == "English") {
      popup.innerHTML = "French";
      popup.classList.toggle('show')
    } else {
      popup.innerHTML = "English";
      popup.classList.toggle('show')
    }
  } else {
    popup.classList.toggle('show');
  }
}  
 /* Popup container - can be anything you want */

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* The actual popup */

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
/* Popup arrow */

.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}  
 <h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click to toggle the popup...
  <span class="popuptext" id="myPopup">English</span>
</div>

Комментарии:

1. Привет, Рик, я хочу, чтобы всплывающее окно вело себя так же, как вы это сделали, но как я могу импортировать JS сюда, в этот код? Как при нажатии на английский и французский, я хочу, чтобы веб-страница была полностью переведена на английский и французский. Файл JS является:

2. ////////////////////////////////// // Не редактировать ниже этой строки // ////////////////////////////////// }; вернуть экспорт; });

3. define([],function(){ var exports = {

4. Я не уверен, как включить ваш код перевода, но почему бы не использовать Google Web translator? translate.google.com/manager/website/?hl=en

5. @user5447339 Я привел пример здесь paymaster.net/net3/test