We all come across a situation when the default notify-the-user procedure is getting incompatible with our project theme and appearance, so in this guide I’m going to discuss about creating a beautiful modal for your web project, with a SCSS and JQuery ( a little bit ) before this, you have to master HTML CSS SCSS JS part 1 and JS part 2 guides.

Now in this guide, We’re making This Beautiful modal from scratch with only 14 lines of JS codes. I’m using HTML SCSS and a JS file in the root folder.


Now it’s not hard at all, Here you can also Download the whole project.

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>SCSS Demo</title>

        <div class="nav">
            <div class="list">
                <a>Contact Us</a>
        <div class="content">
            <h4>Digital Guideline Of 21st Century</h4>
            <br />
            <button onclick="butotnFunction()">Show Modal</button>
        <div class="footer">Tecinpact © 2020 All Rights Reserved.</div>
        <div class="wrapper">
            <div class="modal">
                <close onclick="butotnFunction()">X</close>
                <header># Modal</header>
                    Modal Content Goes Here
                        <li>Press That X To close</li>
                        <li>It's Nice and simple</li>
                <footer>Copyright 2020 Tecinpact Or Something</footer>
        <script src="./index.js"></script>

In the HTML file, I’m creating a very simple webpage and we made this page in This Guide From scratch and additionally I’m adding a Button to open the modal. Also after this code, I’m adding a div with a class of wrapper and in it i’m creating the modal, This wrapper makes the background darker when the modal is showing. And in the modal, I’m creating a close button, header section, main section for content and a footer section. and also I’m adding JQuery from CDN in the end of the document.

$background: url(;
$dark: #1f1e2f;
$mode: #111e6c;
$lite: white;

html {
    height: 100%;
    width: 100%;
    position: fixed;
    user-select: none;

    body {
        font-family: monospace;
        background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        color: $lite;
        box-sizing: border-box;

        .nav {
            position: absolute;
            top: 0;
            width: 100%;
            font-size: 20px;

            .list {
                a {
                    float: right;
                    text-align: center;
                    padding: 14px 16px;
                    text-decoration: none;
                    font-size: 20px;
                    margin: 10px 20px;

        .content {
            display: grid;
            place-items: center;
            position: absolute;
            width: 100%;
            top: 25%;

            h4 {
                font-size: 2em;
                margin: 0;

            h1 {
                font-size: 8.5em;
                margin: 0;

            button {
                padding: 15px 95px;
                margin: 10px;
                border-radius: 500px;
                outline: none;
                border: none;
                font-size: large;
                font-weight: bold;
                color: blanchedalmond;
                background-image: linear-gradient(
                    to right,
                transition-timing-function: linear;
                transition-duration: 0.1s;

            button:hover {
                padding: 15px 105px;
                border: solid #547c7e 2px;

        .footer {
            position: absolute;
            width: 100%;
            bottom: 0;
            text-align: center;
            margin: 20px;

        .wrapper {
            position: fixed;
            z-index: 2;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: grid;
            place-items: center;
            background-color: rgba(0, 0, 0, 0.8);

            .modal {
                close {
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: 50px;
                    color: red;
                    padding: 20px;

                header {
                    margin-bottom: 20px;
                    font-size: 3.5em;

                main {
                    font-size: 2em;

                footer {
                    font-size: 1.5em;

                width: 350px;
                height: 350px;
                border-radius: 20px;
                background-image: linear-gradient(
                    to right top,
                padding: 50px;
                text-align: center;
                display: grid;
                grid-template-rows: auto 1fr auto;

And now here’s the scss Now in here, I’m defining the page width and height in the HTML tags and setting the font aspects in the body, I explained this SCSS code once and here I’m only explaining the modal section. Now when considering the wrapper I fixed it’s position and adjusted z-index to 2 to make it appear in-front of everything. Also I used a trick from This Guide to add the modal to the center of the wrapper. and then adjusted some basic aspects and again used a trick from This Guide to layout the modal.

    display: "none",
let modalStat = 0;

butotnFunction = () => {
    if (modalStat == 0) {
        modalStat = 1;
    } else {
        modalStat = 0;

Here’s where the magic happens. Now considering this code, It’s very simple isn’t it? yeah I’m using a library called JQuery for this section. and I’m sure you never saw this kinds of codes if you’re a beginner. now let’s explore and I’ll post a JQuery guide in the near future. Here the $(".wrapper") is equal to


from JS and I’m selecting the class wrapper and in the beginning changing it’s css to hide when the page loads. and then I’m setting modalStat which is a way for my program to know wether the modal is hidden or not to 0 means hidden and 1 means active. now I’m creating a basic JS function called butotnFunction which I miss spelled but it works for the program, and adding a simple logic to make it appear if hidden and hide if appeared when the function calls. And you can see in the HTML page, that I assigned onclick attribute to this function. When the button in the main page or the X to close button is pressed, this works perfectly and And also Don’t forget to use this in your next project.


It’s simple, It’s beautiful, It’s Elegant and I love it, I hope you like it too and the code is simple and easy to understand. I assume you learn something new today.