با استفاده از html و css و جاوا اسکریپت دکمه ای ایجاد کنید که وقتی روی آن کلیک شد باکسی بصورت تمام صفحه ظاهر شود. این باکس باید دکمه ای به شکل X برای بسته شدن داشته باشد و وقتی کاربر روی آن کلیک کرد باکس حذف شود
پیشنهاد: برای ظاهر و محو شدن باکس میتوانید از انیمیشن های مختلف استفاده کنید
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: rgb(199, 147, 247);
margin: 0;
min-height: 100vh;
font-family: Arial, sans-serif;
}
.main {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
justify-content: center;
align-items: center;
}
.modal-content {
position: relative;
background-color: rgb(248, 250, 252);
width: 300px;
padding: 25px;
border-radius: 15px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.modal-content h3 {
margin-top: 0;
}
.modal-content .close-btn {
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
font-weight: bold;
}
button {
width: 120px;
height: 50px;
background-color: rgb(255, 201, 101);
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="modal">
<div class="modal-content">
<span class="close-btn" onclick="hide()">X</span>
<h3>Title</h3>
<p>Hello</p>
</div>
</div>
<div class="main">
<div>
<p style="text-align: center;">This is main</p>
<button onclick="show()">Show Modal</button>
</div>
</div>
<script>
let show = () => {
document.querySelector('.modal').style.display = 'flex';
}
let hide = () => {
document.querySelector('.modal').style.display = 'none';
}
</script>
</body>
</html>
دانلود
PHP - پی اچ پی
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html {
font-size: 1.5em;
transition: all 1s;
height: 100%;
}
body {
height: 100%;
margin: 0%;
}
section {
z-index: 3;
width: 0%;
height: 0%;
background-color: rgb(255, 251, 0);
overflow: hidden;
transition:
width 0.5s,
height 0.25s;
}
section h2 {
text-align: center;
}
section button {
margin-right: 20px;
margin-top: 20px;
font-size: 2em;
}
#but {
font-size: 2em;
}
div {
display: flex;
justify-content: center;
padding-top: 30px;
}
</style>
</head>
<body>
<section>
<button onclick="hide_section()">X</button>
<h2>باکس تمام صفحه است</h2>
</section>
<div>
<button id="but" onclick="full_screen()">تمام صفحه</button>
</div>
<script>
const section = document.querySelector("section");
const but = document.getElementById("but");
const div = document.querySelector("div");
const full_screen = () => {
but.style.display = "none";
section.style.width = "100%";
section.style.height = "100%";
div.style.display = "none";
};
const hide_section = () => {
section.style.width = "0%";
section.style.height = "0%";
but.style.display = "block";
div.style.display = "flex";
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal</title>
<style>
@font-face {
font-family: "FiraCode";
src: url(./FiraCode-Medium.ttf);
}
* {
user-select: none;
margin: auto;
text-align: center;
font-family: "FiraCode";
color: #d8d8d8;
}
body {
background-color: #151515;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(2px);
display: none;
z-index: 999;
}
#modal {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 80%;
max-width: 530px;
margin: 20px auto;
padding: 15px;
border: 2px solid rgb(90, 90, 90);
border-radius: 5px;
display: none;
background-color: #303030;
}
button {
all: unset;
width: 80%;
max-width: 230px;
height: auto;
padding: 15px;
margin: 10px;
background-color: #202020;
border: 1px solid white;
border-radius: 4px;
transition: all 0.4s ease-in-out;
font-size: 20px;
}
button:hover {
cursor: pointer;
background-color: #353535;
transform: translateY(-5px);
}
span {
cursor: pointer;
color: whitesmoke;
position: absolute;
top: 0;
left: 0;
margin-left: 4px;
font-size: 30px;
}
</style>
</head>
<body>
<button onclick="on()">Show Modal</button>
<div id="overlay"></div>
<div id="modal">
<span onclick="off()">X</span>
<h2>Shayan:</h2>
<h3>Hello, how are you?</h3>
<button onclick="off()">I'm not OK</button>
<button onclick="off()">I'm OK</button>
</div>
<script>
let modal = document.getElementById("modal")
let overlay = document.getElementById("overlay");
let on = ()=>{
modal.style.display = "block"
overlay.style.display = "block"
}
let off = ()=>{
modal.style.display = "none"
overlay.style.display = "none"
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Box</title>
<style>
body { font-family: Arial, sans-serif; }
.fullscreen-box {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
animation: fadeIn 0.5s;
}
.close-btn {
position: absolute;
top: 20px;
right: 20px;
background: red;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<button id="openBtn">باز کردن باکس</button>
<div class="fullscreen-box" id="fullscreenBox">
<button class="close-btn" id="closeBtn">X</button>
<h1 style="color: white;">این یک باکس تمام صفحه است!</h1>
</div>
<script>
document.getElementById('openBtn').onclick = function() {
document.getElementById('fullscreenBox').style.display = 'flex';
};
document.getElementById('closeBtn').onclick = function() {
document.getElementById('fullscreenBox').style.display = 'none';
};
</script>
</body>
</html>
HTML & CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript6</title>
</head>
<style>
body{
padding: 0;
margin: 0;
background-color: aqua;
}
.modal{
display: none;
left:0 ;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(95, 95, 95, 0.274);
text-align: center;
}
.modal-div{
border-radius: 20px;
background-color: white;
margin: 50px;
padding: 20px;
}
.modal-div p a{
color: black;
}
</style>
<body>
<section style="font-size: 20px;text-align: center;">
this is main page
<button onclick="showmodal()">click</button>
</section>
<div class="modal">
<div style="position: relative;" class="modal-div">
<span style="position: absolute; right: 10px; top: 5px; cursor:pointer;" onclick="closemodal()">X</span>
<h3>Title</h3>
<p>hellow.welcome to <a href="http://amirhn.ir" >amirhn.ir</a></p>
</div>
</div>
<script>
let showmodal =()=>{
document.querySelector(".modal").style.display="block"
}
let closemodal=()=>{
document.querySelector(".modal").style.display="none"
}
</script>
</body>
</html>
import tkinter as tk
def open_fullscreen_box():
fullscreen_box.deiconify()
def close_fullscreen_box():
fullscreen_box.withdraw()
root = tk.Tk()
root.title("Fullscreen Box")
root.geometry("300x200")
open_btn = tk.Button(root, text="باز کردن باکس", command=open_fullscreen_box)
open_btn.pack(pady=20)
fullscreen_box = tk.Toplevel(root)
fullscreen_box.withdraw() # Hide initially
fullscreen_box.attributes('-fullscreen', True)
fullscreen_box.configure(bg='black')
close_btn = tk.Button(fullscreen_box, text="X", bg='red', fg='white', command=close_fullscreen_box)
close_btn.place(x=20, y=20)
label = tk.Label(fullscreen_box, text="این یک باکس تمام صفحه است!", fg='white', bg='black', font=("Arial", 24))
label.pack(expand=True)
root.mainloop()
این کد یک پنجره اصلی با دکمه "باز کردن باکس" ایجاد میکند که با کلیک روی آن یک پنجره تمام صفحه با دکمه بسته شدن نمایش داده میشود. پنجره تمام صفحه با پسزمینه سیاه و متن سفید است.
Python
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 5px;
height: 5000px;
}
div{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50% );
z-index: 1000;
width: 95%;
height: 95vh;
visibility: hidden;
border-radius: 20px;
background-color: #898989;
opacity: 0;
transition: opacity 0.5s;
}
#times{
position:absolute;
top: 0;
right: 0;
content: "\00D7";
color: #a30202;
background: rgba(181, 181, 181, 0.97);
height: 40px;
width: 40px;
margin: 5px;
border-radius: 10px;
border-top-right-radius: 20px;
font-size: 30px;
font-weight: bolder;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="openBox()">open</button>
<div>
<span id="times" onclick="closeBox()">×</span>
</div>
<script>
let div= document.querySelector("div")
function openBox(){
div.style.visibility="visible"
div.style.opacity = "1";
}
function closeBox(){
div.style.opacity = "0";
setTimeout(() => {
div.style.visibility="hidden"
}, 500);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<style>
#btn {
background-color: rgb(2, 204, 204);
color: rgb(184, 11, 11);
width: 120px;
height: 40px;
border: 1px solid black;
border-radius: 5px;
text-align: center;
cursor: pointer;
}
#Notif {
width: 100%;
background-color: rgba(167, 167, 167, 0.685);
position: fixed;
height: 100%;
top: 0;
left: 0px;
}
#Notif p {
margin: auto;
display: inline-block;
position: absolute;
top: 250px;
right: 0px;
width: 220px;
}
#Notif img{
float: right;
}
#cancel {
display: inline-block;
padding: 10px;
color: red;
font-size: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="btn" onclick="openNotif()"><p>کمبود نوتیفیکیشن</p></div>
<section id="Notif">
<img src="../../Images/Profile2.jpg">
<p>سلام داداش چطوری الان میپرسی چی شدکه یادت افتادم حقیقتا میخواستم ببینم نت دارم یا نه</p>
<span id="cancel" onclick="closeNotif()">X</span>
</section>
<script>
let btnNotif = document.getElementById("btn")
let notif = document.getElementById("Notif")
let openNotif = () => {
notif.style.display = "block"
}
let closeNotif = ()=>{
notif.style.display = "none"
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>باکس تمام صفحه</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="openBox">باز کردن باکس</button>
<div id="fullscreenBox" class="hidden">
<button id="closeBox" class="close-button">X</button>
<h1>این یک باکس تمام صفحه است!</h1>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
#fullscreenBox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.5s ease;
opacity: 0;
visibility: hidden;
}
#fullscreenBox.show {
opacity: 1;
visibility: visible;
}
.close-button {
position: absolute;
top: 20px;
right: 20px;
background-color: red;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}
.hidden {
display: none;
}
JavaScript (script.js)
javascript
document.getElementById('openBox').addEventListener('click', function() {
const box = document.getElementById('fullscreenBox');
box.classList.remove('hidden');
setTimeout(() => {
box.classList.add('show');
}, 10); // برای اطمینان از اینکه انیمیشن اجرا شود
});
document.getElementById('closeBox').addEventListener('click', function() {
const box = document.getElementById('fullscreenBox');
box.classList.remove('show');
box.addEventListener('transitionend', () => {
box.classList.add('hidden');
}, { once: true }); // فقط یک بار اجرا میشود
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>modal</title>
<style>
body,html{
height: 100%;
margin: 0;
top: 0;
}
.modal{
width: 100%;
height: 100%;
background-color: rgba(195, 64, 64, 0.772);
position: relative;
visibility: hidden;
transition: 1s;
opacity: 0;
}
.modal h3{
left: 48%;
position: relative;
}
#open{
background-color: rgb(217, 232, 232);
position: absolute;
color: rgb(1, 21, 21);
}
.modal button{
position: relative;
background-color: rgb(238, 199, 228);
left: 50%;
}
</style>
</head>
<body>
<button onclick="showModal()" id="open">open modal box</button>
<div class="modal">
<h3>press to exit</h3>
<button onclick="closModal()">x</button>
</div>
<script>
let modal=document.getElementById('open')
let shomodal=document.querySelectorAll(".mod
al")[0]
let showModal=()=>{
shomodal.style.visibility='visible'
setTimeout(()=>{
shomodal.style.opacity=1
},1000)
}
let closModal=()=>{
shomodal.style.visibility=0
setTimeout(()=>{
shomodal.style.opacity=0
},1000)
}
</script>
</body>
</html>
جوابت را با Markdown بنویس و ثبت کن
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نامتوضیح کوتاهی بنویسید تا تیم بررسی کند.