html - Customized Alert box in Javascript -

I'm trying to create customized JavaScript alert boxes. I got this code which is working fine but I do not know how it is working:

Javascript is:

  function custom alert () {this.render = Function (dialog) {var winW = window.innerWidth; Var winH = window.white; Var dialogoverlay = document.getElementById ('dialogoverlay'); Var dialog box = document.getElementById ('dialog box'); Dialogoverlay.style.display = "block"; Dialogoverlay.style.height = winH + "px"; Dialogbox.style.left = (winW / 2) - (350 * .5) + "px"; Dialogbox.style.top = (winH / 2) - (350 * .5) + "px"; Dialogbox.style.display = "block"; Document.getElementById ('Dialog Boxhead'). InnerHTML = "Alert!"; Document.getElementById ('Dialog Box'). InnerHTML = Dialog; Document.getElementById ('dialogboxfoot'). InnerHTML = '& lt; Button ID = "OK" onclick = "Alert.ok ()" & gt; OK & lt; / Button & gt; '; }; This.ok = function () {document.getElementById ('dialog box'). Style.display = "none"; Document.getElementById ('dialogoverlay'). Style.display = "none"; }; } Warn Warning = New CustomAlert ();  

is the stylesheet:

  #dialogoverlay {display: none; Opacity: .8; Status: fixed; Top: 0 pixels; Left: 0 pixels; Background: #ccc; Width: 100%; Z-index: 10; } #dialogbox {display: none; Status: fixed; Background: # 333; Width: 350px; Margins: 10px auto; Z-index: 10; Range: 5px solid # 1ad; Range radius: 15px; -image-radius: 15px; -Vibit-boundary-radius: 15px; } #dialogbox & gt; Div & gt; #dialogboxhead {background: # 111; Font-size: 19px; Padding: 10px; Color: #CCC; Border: 5px solid # 111; Range radius: 15px 15px 0 0; -image-radius: 15px 15px 0 0; Webkit-boundary-radius: 15px 15px 0 0; } #dialogbox & gt; Div & gt; #dialogboxbody {background: # 333; Padding: 20px; Color: #fff; Text align: center; Border: 5px solid # 333; Boundary-radius: 5px; -max-boundary-radius: 5px; -WebKit-boundary-radius: 5px; } #dialogbox & gt; Div & gt; #dialogboxfoot {background: # 333; Padding: 10px; Padding-right: 30px; Text-align: OK, range: 5px solid # 333; Range radius: 15px; -image-radius: 15px; -Vibit-boundary-radius: 15px; } #ok {padding-bottom: 2px; Background: URL (Images / Goldbutton.); Background size: cover; -MOZ-BACKGROUND-SHAPE: COVER; -WebKit-Background-Size: Cover; Width: 62px; Height: 30px; Border: None; Font-size: 12px; Cursor: indicator; }  

and

is HTML:

  & lt; Div id = "dialogoverlay" & gt; & Lt; / Div & gt; & Lt; Div id = "dialog box" & gt; & Lt; Div & gt; & Lt; Div id = "dialog boxhead" & gt; & Lt; / Div & gt; & Lt; Div id = "dialogboxbody" & gt; & Lt; / Div & gt; & Lt; Div id = "dialogboxfoot" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Button onclick = "Warning ('you look very normal today.')" & Gt; Default alert & lt; / Button & gt; & Lt; Button onclick = "Alert.Reder ('You look very beautiful today.')" & Gt; Custom alerts & lt; / Button & gt; & Lt; / Div & gt;  

All this is working fine but I do not ask for a second JavaScript file to call this popup function with my html code. I'm facing the problem when I try to call this render function () from another javascript function. I

  function pop () {// call to call / Render function}