Ciao a tutti, premetto che sono un neofila. Stò facendo un popup che applicherò sulla mia pagina . il pop up si apre dopo 2 secondi dall'apertuara della pagina , ma quando clicco sulla “X” o sullo schermo dovrebbe ingrandirsi a tutto schermo. non capisco dove sia l'errore . potete aiutarmi grazie . metto file HTML,CSS,JS
...............................................HTML
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<h1> prova popup</h1>
<div class="overlay" id="pop">
<div class="popup">
<span id="close">X</span>
<div class="u-container-style u-image u-layout-cell u-size-30 u-image-1" >
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:BTCUSD",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"container_id": "tradingview_2425b"
});
</script>
<div class="u-container-layout u-container-layout-1"></div>
</div>
<div class="u-container-style u-image u-layout-cell u-size-30 u-image-2">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "BINANCE:ETHUSD",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"container_id": "tradingview_35406"
});
</script>
<div class="u-container-layout u-container-layout-2"></div>
</div>
<div class="u-container-style u-image u-layout-cell u-size-30 u-image-3">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "AMEX:SPY",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"container_id": "tradingview_f3a2a"
});
</script>
<div class="u-container-layout u-container-layout-3"></div>
</div>
<div class="u-container-style u-image u-layout-cell u-size-30 u-image-4">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "CAPITALCOM:DXY",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "dark",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"container_id": "tradingview_92cd0"
});
</script>
<div class="u-container-layout u-container-layout-4"></div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
.................................CSS
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0px;
background: #2ecc71;
text-align: center;
color: #fff;
}
.popup{
width: 300px;
height: 300px;
grid-template-rows: 50% 50%;
grid-template-columns: 50% 50%;
margin: 40px auto;
padding: 200px 500px;
display: grid;
position: relative;
}
.overlay{
position: fixed; /* schermo intero*/
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
background: rgba(0,0,0,0.7); /* colore sfondo e opcità */
text-align: center;
display: none; /*cambiaremo in display: none*/
}
#close{
position: absolute;
top: 50px;
right: 50px;
color: #red;
}
#close:hover{
cursor: pointer;
}
...................JS
// mostra il popup dopo 2k millisecondi (2secondi)
setTimeout(
function() {
console.log("run");
document.getElementById('pop').style.display="block" ;
}, 2000);
// full pupup quando clicchi sulla X
document.getElementById("close").onclick = function(e){
document.getElementByClassname('popup').style.width="100vh";
document.getElementsByClassName('popup').style.height="100vh";
}
// full popup quando clicchi sullo sfondo nero
document.getElementById("pop").onclick = function(e){
document.getElementByClassname('popup').style.width="100vh";
document.getElementsByClassName('popup').style.height="100vh";
}