Superowy popup z użyciem div, css i js
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="popup-main">
<div id="popup-in">
<div id="popup-content">
<h2>Hello websterzy!</h2>
<p>To jest super popup!</p>
<img id="popup-img" src="https://www.pikademia.pl/wp-content/uploads/2021/05/cropped-pikademia-logo-64-36x36.png">
<h5>Odwiedźcie nas <a href="https://www.pikademia.pl/">pikademia.pl</a></h5>
</div>
<button id="popup-btn">CLOSE</button>
</div>
</div>
<button id="popupButton">Kliknij, by otworzyć popup</button>
<div id="content">
<p>
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
</p>
<p>
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
</p>
<p>
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
</p>
<p>
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
</p>
<p>
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
This is some paragraf about very important things. It's hard to express with words how important they are.
</p>
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>#popup-main{
background-color: rgba(255, 255, 255,0.5);
display: none;
position: fixed;
padding: 100px;
top:0;
left:0;
width: 100%;
z-index:100;
text-align: center;
}
#popup-in{
background-color: rgb(59, 59, 59);
margin:0 auto;
max-width: 600px;
padding: 40px;
}
#popup-content{
color:rgb(218, 218, 218);
}
#popup-btn{
background-color: #44aaaa;
color:white;
font-weight: 600;
margin-top:20px;
padding: 10px 20px;
}
#popup-content a{
color:#44aaaa;
text-decoration: none;
}
#popup-content h5{
padding-top: 20px;
}
#popupButton{
background-color: rgb(48, 48, 48);
color:white;
padding: 10px 20px;
font-weight: 600;
}function init(){
let openBtn = document.getElementById("popupButton");
openBtn.onclick = openPopup;
let closeBtn = document.getElementById("popup-btn");
closeBtn.onclick = closePopup;
}
function openPopup(){
document.getElementById("popup-main").style.display = "block";
}
function closePopup(){
document.getElementById("popup-main").style.display = "none";
}
document.addEventListener("DOMContentLoaded", init);// w lekkim uproszczeniu
function init(){
const popupMain = document.getElementById("popup-main");
let openBtn = document.getElementById("popupButton");
openBtn.onclick = ()=>{popupMain.style.display = "block";}
let closeBtn = document.getElementById("popup-btn");
closeBtn.onclick = ()=>{popupMain.style.display = "none";};
}
document.addEventListener("DOMContentLoaded", init);Okno popup uruchamiane po czasie w javascript
Popup window with time execution in javascript
Różnica pomiędzy window.setTimeout() i setInterval()
Np. 2 minutowe zadanie ustawione w interwale 10 minutowym zaczyna się co 10 minut, natomiast to samo zadanie z timeout będzie zaczynać się co 12 minut.
Przy prostych zadaniach, częściej będziemy korzystać z setTimeout()
Struktura HTML i CSS jest taka sama jak w przykładzie powyżej, zatem poniżej przedstawiony jest tylko kod js. Okno popup wyświetli się po 2s od załadowania strony, oraz po 1s od kliknięcia na przycisk.
function init(){
let openBtn = document.getElementById("popupButton");
openBtn.onclick = function(){ delayAction(1000); };
let closeBtn = document.getElementById("popup-btn");
closeBtn.onclick = closePopup;
delayAction(2000);
}
function openPopup(){
document.getElementById("popup-main").style.display = "block";
}
function closePopup(){
document.getElementById("popup-main").style.display = "none";
}
function delayAction(t){
window.setTimeout(openPopup,t);
}
document.addEventListener("DOMContentLoaded", init);Okno popup po przewinięciu do określonej pozycji
<span id="curPos"></span> <!--optional for testing-->
<span id="anchorPos"></span>let anchor = document.getElementById("anchorPos");
//let currentPos = document.getElementById("curPos");
let popupReady = true;
function init(){
window.onscroll = checkScrollPos;
let closeBtn = document.getElementById("popup-btn");
closeBtn.onclick = closePopup;
//anchor.textContent = anchor.offsetTop;
}
function openPopup(){
document.getElementById("popup-main").style.display = "block";
popupReady = false;
}
function closePopup(){
document.getElementById("popup-main").style.display = "none";
}
function checkScrollPos(){
//currentPos.textContent = window.pageYOffset;
if(anchor && window.pageYOffset > anchor.offsetTop && popupReady){
openPopup();
}
}
document.addEventListener("DOMContentLoaded", init);