تمرین برنامه نویسی؛ با کدبزن!

منبع جامع سوالات و تمرینات برنامه نویسی

ایجاد Modal

آسان 217/ دانلود 264 بازدید

با استفاده از html و css و جاوا اسکریپت دکمه ای ایجاد کنید که وقتی روی آن کلیک شد باکسی بصورت تمام صفحه ظاهر شود. این باکس باید دکمه ای به شکل X برای بسته شدن داشته باشد و وقتی کاربر روی آن کلیک کرد باکس حذف شود


پیشنهاد: برای ظاهر و محو شدن باکس میتوانید از انیمیشن های مختلف استفاده کنید

2 جواب

<!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>
Hana88 دانلود JavaScript HTML & CSS 
<!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 }); // فقط یک بار اجرا می‌شود
});
Mma123 دانلود JavaScript HTML & CSS
<< صفحه قبل 1 صفحه بعد >>

ارسال جواب

/* کداتو توی این بخش بنویس
فرقی نمیکنه چه زبان برنامه نویسی باشه، همرو پشتیبانی میکنیم :)
البته قبلش این سه خط رو پاک کن */
  • لطفا جواب های تکراری ارسال نکن
  • قبل از ارسال، جوابت رو داخل یک کد ادیتور مثل vscode بنویس و بعد اینجا Paste کن
  • جواب های ارسالی، پس از بررسی کوتاهی، ویرایش میشن و در سایت نمایش داده میشن
  • ارسال جواب حق مادی یا معنوی برای ارسال کننده ایجاد نمیکند و تمام حقوق برای سایت کدبزن محفوظ است

تمرینات مرتبط

تشخیص با استفاده از هوش مصنوعی
×

حساب کاربری

برای استفاده از این بخش باید وارد حساب کاربریت بشی

ورود/ثبت نام
×

نمیتونم این تمرین رو حل کنم 😞

اگه متوجه تمرین نمیشی یا به هر دلیلی نمیتونی حلش کنی، کاملا طبیعیه، اشکالی نداره؛ ناراحت نشو 😊
سعی کن تمرینات آسون تر رو ببینی و جواب های مختلفی که دیگران ارسال کرده اند رو بررسی کنی و یواش یواش به سراغ تمرینات سخت تر بری. همچنین ممکنه جوابت درست باشه ولی با سایر جواب ها متفاوت باشه
اگه برنامه نویسی رو هنوز شروع نکردی یا خوب یاد نگرفتی، میتونی از طریق لینک زیر یاد بگیری

یادگیری برنامه نویسی
بستن