CodeSolved

A comprehensive source of programming questions and exercises

Modal

Practice Easy 217/ Download 697 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

4 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="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.

Related content

Detection using AI
×

حساب کاربری

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

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

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