Question

<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;
});

Answer 1

Something Like this?

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 个答案: