2016-10-20 36 views
1
<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からの手順に従うことにより、以下に示すように、私は誰かが上のクリックした場合という方法でポップアップを作成しようとしています:

私に切り替えるをクリックしますそれは

表示されるはずポップアップ:

英語を(フランス語LANの場合英語がページ上に表示されている場合はゲージが英語で

クリックすると、英語の言語で全体のWebページが表示され、フランス語をクリックすると、フランス語で全体のWebページが表示されます)

フランス語()ページ上に表示されます。私はすでにすべてのテキストが英語からフランス語、フランス語から英語に翻訳された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; 
}); 

English

French

答えて

0

何か?

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>

+0

こんにちはリック、私はあなたがそれを行っているが、どのように私はこのコードでは、ここでJSをインポートすることができますと同じように動作するようにポップアップを動作するようにしたいですか?英語とフランス語をクリックすると、ウェブページが英語とフランス語で完全に翻訳されます。 JSファイルは –

+0

/////////////////////////////////// //この行の下で編集しないでください// ///////////////////////////////// }; 返品の輸出; }); –

+0

define([]、function(){ var exports = { –

関連する問題