Javascript中的自定义警报框

Question

我正在尝试制作自定义的javascript警告框。我发现这个代码工作正常，但我不知道它是如何工作的：

Javascript是：

function CustomAlert() {
  this.render = function(dialog) {
    var winW = window.innerWidth;
    var winH = window.innerHeight;
    var dialogoverlay = document.getElementById('dialogoverlay');
    var dialogbox = document.getElementById('dialogbox');
    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('dialogboxhead').innerHTML = "Alert!";
    document.getElementById('dialogboxbody').innerHTML = dialog;
    document.getElementById('dialogboxfoot').innerHTML = '<button id="ok" onclick="Alert.ok()">OK</button>';
};
  this.ok = function() {
    document.getElementById('dialogbox').style.display = "none";
    document.getElementById('dialogoverlay').style.display = "none";
  };
}
var Alert = new CustomAlert(); 

样式表是：

#dialogoverlay{ 
display: none; 
opacity: .8; 
position: fixed; 
top: 0px; 
left: 0px; 
background: #ccc;
width: 100%; 
z-index: 10; 
}
#dialogbox{
display: none; 
position: fixed; 
background: #333; 
width:350px; 
margin: 10px auto;
z-index: 10; 
border: 5px solid #1ad;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
 }

#dialogbox > div > #dialogboxhead{
background: #111; 
font-size:19px;
padding:10px; 
color:#CCC;
border: 5px solid #111;
border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
}
#dialogbox > div > #dialogboxbody{ 
background:#333; 
padding:20px; 
color:#FFF; 
text-align: center;
border: 5px solid #333;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
} 
#dialogbox > div > #dialogboxfoot{ 
background: #333;
padding:10px; 
padding-right: 30px;
text-align:right; 
border: 5px solid #333;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#ok{
padding-bottom: 2px;
background: url(images/goldbutton.png);
background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
width: 62px;
height: 30px;
border: none;
font-size: 12px;
cursor: pointer;
}

并且

HTML是：

 <div id="dialogoverlay"></div>
    <div id="dialogbox">
        <div> 
            <div id="dialogboxhead"></div> 
            <div id="dialogboxbody"></div> 
            <div id="dialogboxfoot"></div> 
        </div> 
    </div> 
    <button onclick="alert('You look very ordinary today.')">Default Alert</button> 
    <button onclick="Alert.render('You look very pretty today.')">Custom Alert</button>

    </div>

所有这些都很好。但我不想从我的HTML代码中调用此弹出函数，而是从另一个javascript文件调用。 当我尝试从另一个javascript函数调用此render（）函数时，我遇到问题。

 function pop(){
    // code to call 
    // the render function
 }