---
title: "Simple popup panel in HTML"  
description: "In this blog, I have described how to create a simple popup window or display page as popup window. There are simple CSS file and JavaScript that used"  
author: "AVADHESH PATEL"  
published: 2013-02-14  
updated: 2014-09-18  
canonical: https://www.mindstick.com/blog/445/simple-popup-panel-in-html  
category: "database"  
tags: ["database"]  
reading_time: 2 minutes  

---

# Simple popup panel in HTML

Simple popup panel in HTML

In this blog, I have described how to create a simple popup window or display page as popup window. There are simple CSS file and [JavaScript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) that used for open [model popup](https://www.mindstick.com/forum/614/custom-checkbox-not-working-with-model-popup). Steps are given below.

**Step 1:** Open notepad or any other HTML editor as [Visual Studio](https://www.mindstick.com/articles/12378/visual-studio-for-mac-is-out-of-beta-preview-now-officially-available) ASP.NET etc.

**Step 2:** Write below CSS on [your page](https://answers.mindstick.com/qa/32580/how-do-you-pay-facebook-to-help-boost-your-page).

<style type="text/css">\
.fadePanel\
{\
position: fixed;\
width: 100%;\
height: 100%;\
top: 0px;\
left: 0px;\
z-index: 9999;\
}\
.Popup\
{\
position: fixed;\
margin: 0px 25%;\
z-index: 99999;\
}\
.InnerPopup\
{\
margin: auto;\
min-width: 380px;\
min-height: 200px;\
[background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp)-color: #CEC9C9;\
padding: 30px;\
-moz-border-radius-topright: 50px;\
border-top-right-radius: 50px;\
-moz-border-radius-topleft: 50px;\
border-top-left-radius: 50px;\
-moz-border-radius-bottomright: 50px;\
border-bottom-right-radius: 50px;\
-moz-border-radius-bottomleft: 50px;\
border-bottom-left-radius: 50px;\
border: 1px solid Black;\
}\
</style>

**Step 3:** Use below Script on your page.

<script type="text/javascript">\
$([document](https://www.mindstick.com/articles/328642/what-to-consider-while-choosing-a-software-documentation-tool)).ready([function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) () {\
ClosePopUp();\
});

function ShowModalPopUp_SemiTransparentBG() {\
$("#SemiTransparentBG").show('slow');\
$("#PopUp").show('slow');\
$("#PopUpBody")[0].innerHTML = "This popup brings a visual effect that tell user, they are not allow to click the background [controls](https://www.mindstick.com/articles/66/how-to-create-controls-at-run-time-in-csharp-dot-net) until this popup being closed.";\
};

function ClosePopUp() {\
$("#SemiTransparentBG").hide('slow');\
$("#TransparentBG").hide('slow');\
$("#PopUp").hide('slow');\
};\
</script>

**Step 4:** Include **jquery-1.4.1.js** on your page. This JavaScript file you easily [download](https://www.mindstick.com/articles/188403/website-to-download-photos-from-instagram) from [difference](https://www.mindstick.com/articles/157114/good-news-or-bad-news-and-the-difference-is) sources. This JavaScript include before step 3.

**Step 5:** Now we create div that are open as popup. Line of code is given below.

<div>\
<input type="button" id="Button2" value="Close" onclick="ShowModalPopUp_SemiTransparentBG();" /></div>\
<div id="SemiTransparentBG" class="fadePanel semiTransparent">\
</div>\
<div id="PopUp" class="Popup">\
<div class="InnerPopup">\
<p id="PopUpBody">\
</p>\
<p>\
<input type="button" id="Close" value="Close" onclick="ClosePopUp();" />\
</p>\
</div>\
</div>

### Screen Shot

![Simple popup panel in HTML](https://www.mindstick.com/blogs/2da565f6-5d99-4b68-b1dc-6420dc46a5ea/images/7cd276ff-465a-4a89-8e6c-555cfeb26420.jpg)

---

Original Source: https://www.mindstick.com/blog/445/simple-popup-panel-in-html

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.