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.

Popup shown on button click
Popup is shown on button click

let’s start first write HTML code for it.

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

Show detail button in shopping carts
Show detail button in shopping carts

CSS Properties

Put some style on it using CSS.

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:

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.

View Live Demo of Popup Detail Box

Download HTML File of Popup Detail Box

 

Leave a Reply

Your email address will not be published. Required fields are marked *