Showbox appears behind header, footer or other x5 objects 
Autore: Hanafi SalmanDear All,
I use an HTML code object and create a showbox, but when the showbox appears the header and footer still appear as if they are in front of the showbox.
Is there a way so that when the showbox appears everything is closed, both the header and footer and other objects, for example, I use Justified Gallery X5 but it still appears in front of the showbox.
Here is the link:
https://ica.web.id/showbox.html
https://ica.web.id/showbox2.html
Here is the code in X5 HTML code object:
<style>
.open{color:blue;cursor:pointer;font-size: 16px;font-weight: bold;}
.dialog{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);justify-content:center;align-items:center;}
.box{background:#fff;width:300px;padding:15px;border-radius:10px;text-align:center;}
.box img{width:60%;border-radius:10px;}
.close{float:right;cursor:pointer;font-size:20px;}
</style>
<span class="open" onclick="openBox()">
Silakan Klik Disini
</span>
<div class="dialog" id="dialog">
<div class="box">
<span class="close" onclick="closeBox()">×</span>
<img src="https://ica.web.id/files/icaweb-showbox2_hmtl.png">
<h3>Kode QR</h3>
</div>
</div>
<script>
function openBox(){document.getElementById("dialog").style.display="flex";}
function closeBox(){document.getElementById("dialog").style.display="none";}
</script>
(It > En) ... Hi, please remove the code for my pagination bar, which might be interfering, as it was designed for another type of site/page...
.
ciao
.
Autore
I've removed it.. It's the same, @Kol Asim
Hello Hanafi,
you may want to specify a high z-index value in your code, so that it is not displayed as hidden below other elements.
I remain available.
Autore
Where or in what part should I put the code?
Autore
I got the script code above from AI which little customize.. I have no knowledge of css but little understand for html
...in the HTML Code Object you need to insert only this code:
<span class="open" onclick="openBox()">
Silakan Klik Disini
</span>
--------------------------------------
...you need to paste all this code in Step 3 | Expert | Code | in the last option:
> Before the closing /body tag:
<style>
.open{color:blue;cursor:pointer;font-size: 16px;font-weight: bold;}
.dialog{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);justify-content:center;align-items:center;}
.box{background:#fff;width:300px;padding:15px;border-radius:10px;text-align:center;}
.box img{width:60%;border-radius:10px;}
.close{float:right;cursor:pointer;font-size:20px;}
</style>
<div class="dialog" id="dialog">
<div class="box">
<span class="close" onclick="closeBox()">×</span>
<img src="https://ica.web.id/files/icaweb-showbox2_hmtl.png">
<h3>Kode QR</h3>
</div>
</div>
<script>
function openBox(){document.getElementById("dialog").style.display="flex";}
function closeBox(){document.getElementById("dialog").style.display="none";}
</script>
.
ciao
.
Autore
Incredible, works so perfect.. Thank you very much..
Thanks lots @KolAsim.. so expert..
... OK ... ciao...
.