Build a Popup Lighbox Modal Dialog Box on Page Load in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

Build a Popup Lighbox Modal Dialog Box on Page Load in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a popup modal dialog box on page load in browser using html5 css3 and javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<!-- use this for popup-->
<div id="boxes">
  <div style="display: none;" id="dialog" class="window">Webenlance
    <div id="lorem">
      <p> Webenlance was established in November 2010 at new delhi, India. The Webenlance is a Digital Commerce company. The Founder of Comapany Have More than 6 + Years of experience in this industries. We have served over 100+ clients all over the India and earned their trust & satisfaction in the quality work we delivered them. We specialize in projects that combine creativity and innovation with the highest levels of quality with intelligent ... </p>
    </div>
    <div id="popupfoot"> <a href="http://webenlance.com/" class="close agree">I agree</a> | <a class="agree"style="color:red;" href="http://webenlance.com/">I do not agree</a> </div>
  </div>
  <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
</div>
<!-- use this for popup-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 

 

Now we need to create the style.css file and copy paste the following code

See also  Build a 2D HTML5 Canvas MotoGP Car Racing Game With Multiple Levels in Vanilla Javascript Full Project For Beginners

 

 

style.css

 

 

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:100vh;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 15px;
  text-align: center;
}
#boxes #dialog {
  width:450px; 
  height:50vh;
  padding:10px;
  background-color:#ffffff;
  font-family: 'Segoe UI Light', sans-serif;
  font-size: 15pt;
}
.maintext{
    text-align: center;
  font-family: "Segoe UI", sans-serif;
  text-decoration: none;
}
body{
  background: url('bg.jpg');
}
#lorem{
    font-family: "Segoe UI", sans-serif;
    font-size: 12pt;
  text-align: left;
}
#popupfoot{
    font-family: "Segoe UI", sans-serif;
    font-size: 16pt;
  padding: 10px 20px;
}
#popupfoot a{
    text-decoration: none;
}
.agree:hover{
  background-color: #D1D1D1;
}
.popupoption:hover{
    background-color:#D1D1D1;
    color: green;
}
.popupoption2:hover{
    
    color: red;
}

 

 

 

And now we need to create the script.js file and copy paste the following code

 

 

script.js

 

 

$(document).ready(function() {    

        var id = '#dialog';
    
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
    
        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        
        //transition effect     
        $('#mask').fadeIn(500); 
        $('#mask').fadeTo("slow",0.9);  
    
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
              
        //Set the popup window to center
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
    
        //transition effect
        $(id).fadeIn(2000);     
    
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        
        $('#mask').hide();
        $('.window').hide();
    });     
    
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });     
    
});

 

See also  Build a Weight Unit Converter in HTML5 CSS3 and Javascript Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

 

 

Leave a Reply