با استفاده از 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>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>
دانلود
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
<!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>
<!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()
این کد یک پنجره اصلی با دکمه "باز کردن باکس" ایجاد می‌کند که با کلیک روی آن یک پنجره تمام صفحه با دکمه بسته شدن نمایش داده می‌شود. پنجره تمام صفحه با پس‌زمینه سیاه و متن سفید است.
<!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>
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام