Hey friends, and welcome back to another blog. Today, we are going to cover a fan-requested video which is how to make a simple popup box onclick using JavaScript.
This video was requested by my subscriber, Techy pro. He/she requested this tutorial to implement this in a game project. Even you can use it in any other project too. For an example, you can add this in your page and when clicked, it can display this popup box with any instructions of your game in it.
My video tutorial and demo is below:
Do watch my video tutorial below for more clarity :
Paste the codes below in your HTML file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Simple Popup Box using HTML, CSS & JS | CodingPorium</title>
</head>
<style>
/*Import poppins font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: "poppins",sans-serif;
}
body{
display: flex;
justify-content: center;
align-items:center;
height:100vh;
background-color:#5203fc;
}
::selection{
color:white;
background:#5203fc;
}
/* Button used to open popup */
.open-button {
background-color: white;
color: #5203fc;
padding: 16px 20px;
border: none;
border-radius:5px;
cursor: pointer;
opacity: 0.8;
position: fixed;
width: 280px;
}
/*Hover effect for open popup button */
.open-button:hover{
opacity:1;
}
/* The hidden popup box */
.popup {
display: none;
position: fixed;
background-color:white;
border-radius:5px;
padding:20px;
z-index: 9;
}
/* The button used to close the popup*/
.close-button{
background:black;
color:white;
border-radius:5px;
padding:10px;
border:none;
}
</style>
<body>
<button class="open-button" onclick="openBox()">Open Popup</button>
<div class="popup" id="myForm">
<h1>Welcome!</h1>
<p>This video was requested by Techy Pro. Do subscribe to CodingPorium for more tutorials with free source code!</p>
<button type="button" class="close-button" onclick="closeBox()">Close</button>
</div>
</body>
<script>
//function to open popup
function openBox() {
document.getElementById("myForm").style.display = "block";
}
//function to close popup
function closeBox() {
document.getElementById("myForm").style.display = "none";
}
</script>
</html>
And that's all for this tutorial. Thanks for reading and do subscribe to my YouTube channel for more tutorials.
Till the next one, goodbye!
@CodingPorium can u make other one also like in YouTube if we press shift+? then a pop up will open like that u can try by pressing shift+?
ReplyDeletePost a Comment