CodeSolved

Solved Programming Questions & Exercises

Modal

Practice Easy 217/ Download 1380 Views

Create a button using HTML, CSS and JavaScript to appear full screen when clicking on it. This box must have an X -shaped button to close and delete the box when the user clicks on it


Suggestion: You can use different animations to appear and fade

5 Answers

<!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 Download JavaScript HTML & CSS 
<!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>
Unun..ali..nunu Download JavaScript HTML & CSS 
<!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>
Programmer Download 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); # To ensure the animation is running
});

document.getElementById('closeBox').addEventListener('click', function() {
    const box = document.getElementById('fullscreenBox');
    box.classList.remove('show');
    box.addEventListener('transitionend', () => {
        box.classList.add('hidden');
    }, { once: true }); # Run only once
});
Mma123 Download JavaScript HTML & CSS 
<!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>
Maryam.n Download JavaScript HTML & CSS

Submit answer

Submitting answers is currently unavailable.

×

Account

You must be logged in to access this section.

Login/Sign up
×

I can't solve this exercise 😞

If you don’t understand the exercise or can’t solve it for any reason, that’s completely normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer might be correct even if it’s different from others.

Close