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.
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.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="main"> <div class="pic"> <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" /> <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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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:
|
1 2 3 4 5 6 7 |
<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> |
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.
|
1 2 3 4 5 6 7 8 9 |
<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