(Beta) Popup not working

Hi, thanks for your effort. It worked for Desktop version but not for mobile version. When clicking on mobile, nothing popup. Appreciate your time!

• This reply was modified 1 year, 10 months ago by Chris.

Hi,

What 2 language selectors? If you mean 2 Plugins, it’s just one.

This is the code

<!– GTranslate: https://gtranslate.io/ –>
<span>Ελληνικά</span><span style=”color:#666;font-size:8px;font-weight:bold;”>▼</span>
<div id=”gt_fade” class=”gt_black_overlay”></div>
<div id=”gt_lightbox” class=”gt_white_content notranslate”>
<div style=”position:relative;height:14px;”><span onclick=”closeGTPopup()” style=”position:absolute;right:2px;top:2px;font-weight:bold;font-size:12px;cursor:pointer;color:#444;font-family:cursive;”>X</span></div>
<div class=”gt_languages”>
<span>Ελληνικά</span> <span>English</span> <span>Français</span> <span>Deutsch</span> <span>Русский</span></div>
</div>
<style>
.gt_black_overlay {display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:2017;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
.gt_white_content {display:none;position:fixed;top:50%;left:50%;width:341px;height:180px;margin:-90px 0 0 -170.5px;padding:6px 16px;border-radius:5px;background-color:white;color:black;z-index:19881205;overflow:auto;text-align:left;}
.gt_white_content a {display:block;padding:5px 0;border-bottom:1px solid #e7e7e7;white-space:nowrap;}
.gt_white_content a:last-of-type {border-bottom:none;}
.gt_white_content a.selected {background-color:#ffc;}
.gt_white_content .gt_languages {column-count:1;column-gap:10px;}
.gt_white_content::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#F5F5F5;}
.gt_white_content::-webkit-scrollbar {width:5px;}
.gt_white_content::-webkit-scrollbar-thumb {border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888;}
</style>

<script>
function openGTPopup(a) {jQuery(‘.gt_white_content a img’).each(function() {if(!jQuery(this)[0].hasAttribute(‘src’))jQuery(this).attr(‘src’, jQuery(this).attr(‘data-gt-lazy-src’))});if(a === undefined){document.getElementById(‘gt_lightbox’).style.display=’block’;document.getElementById(‘gt_fade’).style.display=’block’;}else{jQuery(a).parent().find(‘#gt_lightbox’).css(‘display’, ‘block’);jQuery(a).parent().find(‘#gt_fade’).css(‘display’, ‘block’);}}
function closeGTPopup() {jQuery(‘.gt_white_content’).css(‘display’, ‘none’);jQuery(‘.gt_black_overlay’).css(‘display’, ‘none’);}
function changeGTLanguage(pair, a) {doGTranslate(pair);jQuery(‘a.switcher-popup’).html(jQuery(a).html()+'<span style=”color:#666;font-size:8px;font-weight:bold;”>▼</span>’);closeGTPopup();}
(function gt_jquery_ready() {
if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);
jQuery(‘.gt_black_overlay’).click(function(e) {if(jQuery(‘.gt_white_content’).is(‘:visible’)) {closeGTPopup()}});
})();
</script>
<style>#goog-gt-tt{display:none!important;}.goog-te-banner-frame{display:none!important;}.goog-te-menu-value:hover{text-decoration:none!important;}.goog-text-highlight{background-color:transparent!important;box-shadow:none!important;}body{top:0!important;}#google_translate_element2{display:none!important;}</style>
<div id=”google_translate_element2″></div>
<script>function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: ‘el’,autoDisplay: false}, ‘google_translate_element2’);}if(!window.gt_translate_script){window.gt_translate_script=document.createElement(‘script’);gt_translate_script.src=’https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2&#8242;;document.body.appendChild(gt_translate_script);}</script>

<script>
function GTranslateGetCurrentLang() {var keyValue = document[‘cookie’].match(‘(^|;) ?googtrans=([^;]*)(;|$)’);return keyValue ? keyValue[2].split(‘/’)[2] : null;}
function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent(‘on’+event,evt)}else{var evt=document.createEvent(‘HTMLEvents’);evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair==”)return;var lang=lang_pair.split(‘|’)[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split(‘|’)[0])return;if(typeof ga==’function’){ga(‘send’, ‘event’, ‘GTranslate’, lang, location.hostname+location.pathname+location.search);}var teCombo;var sel=document.getElementsByTagName(‘select’);for(var i=0;i<sel.length;i++)if(sel[i].className.indexOf(‘goog-te-combo’)!=-1){teCombo=sel[i];break;}if(document.getElementById(‘google_translate_element2’)==null||document.getElementById(‘google_translate_element2′).innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,’change’);GTranslateFireEvent(teCombo,’change’)}}
(function gt_jquery_ready() {
if(!window.jQuery||!jQuery.fn.click) return setTimeout(gt_jquery_ready, 20);
if(GTranslateGetCurrentLang() != null)jQuery(document).ready(function() {var lang_html = jQuery(“.gt_languages a[onclick*=’|”+GTranslateGetCurrentLang()+”‘]”).html();if(typeof lang_html != “undefined”)jQuery(‘a.switcher-popup’).html(lang_html.replace(“data-gt-lazy-“, “”)+'<span style=”color:#666;font-size:8px;font-weight:bold;”>▼</span>’);});
})();
</script>

Issue with nice dropdown solved after changing theme’s header z-index from 100 to 1. Dropping the code below in case it could be useful for someone.

#site-header {
position: relative;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #f1f1f1;
z-index: 1;
}`