Modal Box


Author: Vincent Berger
Created: Nov 6, 2018






A simple but effective minimal code modal box that can be used everywhere!
To create a modal box we need to create a parent div element that holds the child div element that hold all the content.
The parent element will use all width and height of the clients screen to make sure the layer is covering all content and elements when the modal box is opened, this is usually given a blur or a color with certain transparency to overlay the below contents/elements.
The child element will act as a overlay for the parent element so we can read and see the content within the child element clearly.
By clicking on the exit icon or outside the child element, the modal box will be closed.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    </head>
    <body>
        <!-- Trigger the modal box by button click 
        -->
        <button>
            Try Modal
        </button>
    
    
    
        <!-- 
            MODAL BOX 
        -->
        <div id="modal_main" class="modalbox"></div>
        <div id="modal" class="modalbox">
            <li class="material-icons" id="close">remove_circle_outerline</li>
            <br />
            <h2>Modal Box</h2>
            <p>
            Close the box by clicking
            outside the modal or the 
            close icon.
            <br /><br />
            ©Created by Vincent Berger.
            </p>
        </div>
        <!-- MODAL BOX END -->
    </body>
</html>
                

CSS:

body {
    margin:0px;
}

/* MODAL BOX */
div#modal_main{
    position:absolute; margin:0px;
    width:100vw; height:100vh; opacity:0.4;
    background-color:black;
    display:none;
}
div#modal{
    position:absolute; margin:0px;
    width:300px; 
    background-color:white;
    border-radius:12px; top:20%; left:10%;
    box-shadow:2px 2px 20px 2px black;
    text-align:center;
    font-size:12px; font-weight:400;
    display:none;
}
/* MODAL BOX END */

button{
    width:100px; height:100px;
    background-color:#f99;
    outline:none; border:0px;
    margin:0px; position:absolute;
    top:40%; left:40%; color:white;
    font-weight:800; font-size:12px;
    border-radius:7px;
}
li#close{
    color:red; position:absolute;
    margin:0px; left:90%; top:5px;
}
                

Javascript:

$(()=>{
    //_ DISPLAY MODAL
    $("button").on("click",()=>{
        $(".modalbox").fadeIn({
            display:"block"
        });
    });
    
    //_ CLOSE MODAL
    $("#modal_main,#close").on("click",()=>{
        $(".modalbox").fadeOut({
            display:"initial"
        });
    });
});
                

Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top