JS Popup Popup Layer Implementation method

This article is an example of how to create a pop-up layer, let's look at the example below.
Html

Create a div block and the contents of our pop-up window. Name is popupcontent and use this ID to determine the content of the pop-up layer:

<div id= "Popupcontent" >this is a popup window!</div>

Now to write a pop-up layer CSS tutorial style
Popup css

#popupcontent {
Position:absolute;
Visibility:hidden;
Overflow:hidden;
border:1px solid #ccc;
Background-color: #f9f9f9;
border:1px solid #333;
padding:5px;
}

JS First selection use getElementById function Popupcontent and set related properties

var popup = document.getElementById ("popupcontent");

Popup.style.top = "200px";
Popup.style.left = "200px";
Popup.style.width = w + "px";
Popup.style.height = h + "px";

To judge

if (Basetext = null)
Basetext = popup.innerhtml;
popup.innerhtml = Basetext + "<div id=" StatusBar "><button onclick=" Hidepopup (); " >close window<button></div> ";

Complete JS Code

var basetext = null;
function ShowPopup (w,h) {
var popup = document.getElementById ("popupcontent");
Popup.style.top = "200px";
Popup.style.left = "200px";
Popup.style.width = w + "px";
Popup.style.height = h + "px";
if (Basetext = null)
Basetext = popup.innerhtml;
popup.innerhtml = Basetext + "<div id=" StatusBar "><button onclick=" Hidepopup (); " >close window<button></div> ";
var Sbar = document.getElementById ("StatusBar");
Sbar.style.margintop = (parseint (h) -40) + "px";
popup.style.visibility = "visible";
}

Hide function

function Hidepopup () {
var popup = document.getElementById ("popupcontent");
popup.style.visibility = "hidden";
}

Calling the pop-up layer method

<a href= "#" Onmouseo Tutorial ver= "ShowPopup (300,200);" >open

popup</a>