Popup Detail Box using html and Javascript

Popup Detail Box

if we have separate pages for details and user’s internet connection is slow then it take too much time to load pages separately, and if the user wants to check more than one item’s detail, it would become so much hectic to browse all the pages just to check the details of a few items. so to optimise this problem we use popup menus for showing the details. which takes less time to load and improve the readability of website. As for example, shopping cart sites uses the popup Detail box to show the details of the products. All the products are shown on a single page like.

shopping cart website pop up menu for detail — shopping cart website popup menu for detail

Details on Popup

And when we click on Show Detail button it shows a popup menu.

let’s start first write HTML code for it.

<div class="main">
<div class="pic">
<img src="//g02.a.alicdn.com/kf/HTB1O.MbJXXXXXb8XFXXq6xXFXXXC/top-selling-girls-dresses-wedding-dress-design-kids-latest-dress-designs-for-kids.jpg"
class="img1" />
<p><span class="spn1"> $:12</span><span class="spn2"> $:15</span></p>
<h2 class="name">Nice Little Girl Dress</h2>
<a href="#" class="cart" >ADD TO CART</a>
</div>
<p class="Details" onclick="show(1)">SHOW DETAILS</p>
</div>

<img src="http://g02.a.alicdn.com/kf/HTB1O.MbJXXXXXb8XFXXq6xXFXXXC/top-selling-girls-dresses-wedding-dress-design-kids-latest-dress-designs-for-kids.jpg"

class="img1" />

<h2 class="name">Nice Little Girl Dress</h2>

</div>

<p class="Details" onclick="show(1)">SHOW DETAILS</p>

</div>

In above code, it’s the main div and inside it, it’s another div which contain a picture old price new price item name and add to cart option and outside this div here is the option of show details. I assign classes to all the dives and HTML elements to stylise

CSS Properties

Put some style on it using CSS.

<style>

h2,p{margin: 0px;padding: 0px;}

body{background-color: #fff;}

.main{width:20%;height:50%;box-shadow:2px 32px 30px;margin:2%;float:left;}

.pic{border:1px solid;width: 100%;height: 100%;margin: auto;background-color:#e6e6e6;padding:5px;}

.img1{height: 70%;width: 98%;text-align: center;display: block;margin: auto;}

h2{display: block;margin:auto 10%;}

.spn1{font-size: 22px;}

.spn2{text-decoration: line-through;}

.main .pic p{text-align: right;}

.cart{text-align: center;display: block;text-decoration: none;margin: 3%;color: white;border: 2px solid;background-color: #blue;padding: 2px;}

.Details{text-align: center;display: block;text-decoration: none;color: blue;width: 80%;margin: 0px 12%;padding: 3px;font-weight:bold; 
  border-radius:0px 0px 100px 100px;display: none;background-color: skyblue; }

.pic:hover + .Details{display: block;}

.Details:hover{display: block;border-bottom:8px solid;cu$or: pointer;}

.cart:hover{color: black;background-color: white;font-weight: bold;}

input[type=button]{float: right;border: 1px solid;border-radius:50px;padding: 2px;margin: 2%;color:blue;font-size: 20px;cu$or: pointer; }

#showdetail{top:20%;position: fixed;height: 50%;width: 50%;background-color:whitesmoke;border-radius:20px;border-style:dotted;right:25%;display:none;box-shadow:2px 2px 50px blue;}

</style>

<style>

h2,p{margin: 0px;padding: 0px;}

body{background-color: #fff;}

.main{width:20%;height:50%;box-shadow:2px 32px 30px;margin:2%;float:left;}

.pic{border:1px solid;width: 100%;height: 100%;margin: auto;background-color:#e6e6e6;padding:5px;}

.img1{height: 70%;width: 98%;text-align: center;display: block;margin: auto;}

h2{display: block;margin:auto 10%;}

.spn1{font-size: 22px;}

.spn2{text-decoration: line-through;}

.main .pic p{text-align: right;}

.cart{text-align: center;display: block;text-decoration: none;margin: 3%;color: white;border: 2px solid;background-color: #blue;padding: 2px;}

.Details{text-align: center;display: block;text-decoration: none;color: blue;width: 80%;margin: 0px 12%;padding: 3px;font-weight:bold;

border-radius:0px 0px 100px 100px;display: none;background-color: skyblue; }

.pic:hover + .Details{display: block;}

.Details:hover{display: block;border-bottom:8px solid;cu$or: pointer;}

.cart:hover{color: black;background-color: white;font-weight: bold;}

input[type=button]{float: right;border: 1px solid;border-radius:50px;padding: 2px;margin: 2%;color:blue;font-size: 20px;cu$or: pointer; }

#showdetail{top:20%;position: fixed;height: 50%;width: 50%;background-color:whitesmoke;border-radius:20px;border-style:dotted;right:25%;display:none;box-shadow:2px 2px 50px blue;}

</style>

Although its hard to read but not to understand I put simple CSS properties on them to read more about CSS properties.

HTML Code

Now For details pop-up menu HTML code is:

<div id="showdetail">

<input type="button" onclick="end()" value="X"/>

<h1>Show Details Of Items Here <hr>To close the pop up click on cancel button<hr></h1>

</div>

<h1>Show Details Of Items Here <hr>To close the pop up click on cancel button<hr></h1>

</div>

It must contain a button to close that pop-up and all your details that you want to show for items.

JavaScript

Now to handle that popup, javascript code is simple consisting of two functions one is for showing popup and other is for closing it.

<script>
var x =document.getElementById("showdetail");
function show(no){
x.style.display="block";
}

function end(){
x.style.display="none";}
</script>

var x =document.getElementById("showdetail");

function show(no){

x.style.display="block";

}

function end(){

x.style.display="none";}

</script>

View Live Demo of Popup Detail Box

Download HTML File of Popup Detail Box

Popup Detail Box

Details on Popup

CSS Properties

HTML Code

JavaScript

Share this: