Close button not function (mobile)

Hi all, I Am new member, need your helps guys … I have popup FB Fanpage for my site and the popup can not be close in mobile version. In inspect element use Chrome (mobile version) this popup can be close. But if I open with my smartphone, the “Close Button” not function or the popup can’t be close.
How to make “Close Button” can be function and the popup can be close?
This the code:

<style>@media screen and (min-width: 721px){#serdadu2{width:auto;height:auto;text-align:left;display:none;position:fixed;bottom:0px;left:0px;}}@media screen and (max-width: 720px){#serdadu2{width:auto;height:auto;text-align:left;display:scroll;position:fixed;bottom:0px;left:0px;}}**

**.close {**

**position:absolute;**

**top:4px;**

left:4px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:10px;

width:10px;

text-align:center;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:22px;

cursor:pointer;

}

#Syanam-Abdillah {

position:fixed !important;

position:absolute;

top:370px;

left:17%;

margin:0px 0px 0px 0px;

width:285px;

height:240px;

padding:16px;

background:#fff;

font:normal Dosis, Georgia, Serif;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

#Syanam-Abdillah a.close {

position:absolute;

top:-12px;

left:-14px;

background:#fff;

font:bold 16px Arial, Sans-Serif;

text-decoration:none;

line-height:10px;

width:10px;

text-align:center;

color:#111;

border:2px solid #333;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:22px;

-moz-border-radius:22px;

border-radius:22px;

cursor:pointer;

</style>

<script type='text/javascript'>$(document).ready(function(){$("img#closed").click(function(){$("#btm_banner").hide(90)})});</script>

<script type="text/javascript">/<![CDATA[/var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",i="?m=1";function j(){var m=window.location.href,l=m.split(h);switch(l.length){case 1:return m+i;case 2:return 0<=l[1].search(g)?null:m+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var k=j();k&&window.location.replace(k)}/]]>/</script><script type="text/javascript">if(window.jstiming){window.jstiming.load.tick("headEnd")};</script>

<div id="serdadu2" style="width:autopx;height:0;text-align:left;display:scroll;position:fixed;top:180px;left:15%">

<div>

<script>

var _0xa260=["\x64\x69\x73\x70\x6C\x61\x79","\x73\x74\x79\x6C\x65","\x73\x65\x72\x64\x61\x64\x75\x32","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x6E\x6F\x6E\x65"];function myfunction(){document[_0xa260[3]](_0xa260[2])[_0xa260[1]][_0xa260[0]]= _0xa260[4]}var delay=1700

</script>

<ahref="#" id="close-teaser" onclick="setTimeout(myfunction, delay);">

<center><font color='red'><b><center class="close">&#215;</center></b></font></center></a></div>

<div id="Syanam-Abdillah" i-amphtml-fixedid="F0" style="top: 200px;"><b><center>= [ LIKE PAGE & CLOSE (X) ] To Read Article =</center></b><br /><center><p></p></center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://web.facebook.com/tipskecantikan/?ref=hl&amp;width=285&amp;height=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0"style="border:none; overflow:hidden; width:285px; height:240px;" allowtransparency="true"></iframe></div>

</div>

Thanks before, I hope anyone can help me … regards.

1 Like

<ahref="#" id=“close-teaser” onclick=“setTimeout(myfunction, delay);”>
you need to add space here <ahref <a href

Still can not being closed sir,
not-function

<a href="#" id=“close-teaser” onclick=“setTimeout(myfunction, delay)”>
x

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Not work sir, the popup jump up

Ok, understand sir, thanks

Why is it hex-encoded? I would start by trying a non-encoded version just to see if that is an issue.

Replace the hex-encoded array and function usage with the plain version below.

function myfunction() {
  document.getElementById('serdadu2').style.display = 'none';
}

What device and browser are you testing this on?

The onclick event should work on mobile devices as long as the element is interactive, an a element is as long as it has an href. But I would suggest using a button for this and not a “dead” link.

There may be device and browser-specific related bugs or issues we can’t test without knowing more.


You can look into touch events as well to see if you need to implement both for your specific device.

Links

Element: click event - Web APIs | MDN
Touch events - Web APIs | MDN
Supporting both TouchEvent and MouseEvent - Web APIs | MDN

Thanks for your reply, this script is not mine …, I dont know much more about html and java script code. I use Chrome and Opera for test in my device.
So, what the code should I replace with your code above?

Hi all, I have fixed the problem. The problem is caching mobile is active on WP Rocket plugin. I disable it, and the popup in smartphone device can being close perfectly.
Thanks for your attentions guys.