Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

📥How to Create a Modal box (Contains Critical Information or Form)🗳️

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • Button in HTML
  • parentElement & childElement is HTML
  • window.onclick event in JS
  • Animation in CSS
  • Postion property in CSS

Click the modal button & see how it's works

HTML


<div class="showcontent">

    <h3>Click the modal button & see how it's works</h3>

    <button class="modalbtn">Modal</button>

    <div class="modalbox" id="mymodal">

        <div class="modalrow">

            <span onclick="this.parentElement.parentElement.style.display='none';">X</span>

            <div class="modalheader">

                <h2>My Header</h2>

            </div>

            <div class="modalcontent">

                <p>Some text..</p>

                <p>Some text..</p>

                <h4>Or contain any type form</h4>

            </div>

            <div class="modalfooter">

                <h2>Footer</h2>

            </div>

        </div>

    </div>



</div>

JavaScript


window.onclick = function (event) {
    //console.log(event.target.className);

    let showed=document.querySelector(".modalbox");

    if (event.target.className == "modalbtn") {
        showed.style.display="block";

    }
    //console.log(event.target.parentElement.className);
}

CSS


.modalbox {
    width: 80%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.628);
    color: white;
    position: fixed;
    top: 0;
    padding-top: 100px;
    overflow: hidden;
    z-index: 100;
    left: 20%;
    animation-name: ex;
    animation-timing-function: ease-in-out;
    animation-duration: 1.4s;

    display: none;

}

@keyframes ex {
    from {
        top: -300px;
        opacity: 0.5;
    }

    to {
        top: 0;
        opacity: 0.8;
    }

}

.modalrow {
    position: relative;
    width: 90%;
    margin: auto;
    background-color: rgb(217, 255, 0);
    box-shadow: 2px 2px 3px 2px black;

}

.modalcontent {
    padding-left: 8px;
    color: black;
}

.modalheader,
.modalfooter {
    background-color: rgb(30, 255, 124);
    padding: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.modalbtn {
    border: none;
    padding: 10px 16px;
    border-radius: 5px;
    background-color: #04AA6A;
    color: white;
    font-size: 18px;
    cursor: pointer;
    font-weight: bold;
}

.modalrow span {
    position: absolute;
    right: 10px;
    top: 5px;
    color: red;
    font-size: 25px;
    cursor: pointer;
}

HTML DOM

  • querySelector: retuns the first element within the document that matches the specified CSS selctor. Example: const sampleElement = document.querySelector('.sample').If there are mutltiple element with the class name 'sample' `querySelector` will return the first matching elements.
  • You can also use getElementById, getElementByClassName, querySelectorAll etc

String charAt()

  • The charAt(): method in JavaScript returns the character at a specified index in a string. The index starts from 0. Example: const str = "Hello, World!";
    const char = str.charAt(7)

setTimeOut method()

  • setTimeOut(function-name, millsec): that will execute the provided function after certain millisecond.
    clearTimeout(timeoutId) used to cancel time out if needded.

requestAnimationFrame()

  • requestAnimationFrame(): works by calling the provided callback function before the next repaint, allowing smooth animations.
    Example requestAnimationFrame(function_name);