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>