I understand this script except for the notation in: "popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';" Can you explain it for me please?

Complete script:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
/*<![CDATA[*//*---->*/
function popup(popup_name) {

popup_elem=document.getElementById(popup_name);
popup_elem.style.display == 'block' ? popup_elem.style.display = 'none' : popup_elem.style.display = 'block';
}
/*--*//*]]>*/
</script>
<style type="text/css">
#outer {position:fixed; top:0; left:0; width:100%; height:100%; display:none; background-color:#000; opacity: .75; }
.middle {height:100%; display:table; margin:0 auto;}
.inner {vertical-align:middle; display:table-cell;}

#firstPopupDiv {width:100px;height:100px;background-color:red;margin:40px 0px 0px 0px;}
</style>

<!--[if IE]>
 <style>
#outer {filter: alpha(opacity = 75);}
 </style>
<![endif]-->

<!--[if lte IE 7]>
 <style>
  /* centering for ie6/ie7 */
  .middle { position:absolute; top:50%; left:50%; height:auto;  z-index:999;}
  .inner { position:relative; top:-50%; left:-50%; }
 </style>
<![endif]-->

</head>
<body>
<h1 style="float:left;"><a href="javascript:void(0);" onclick="popup('outer')">Click Here To Open The Pop Up</a></h1>

<div id="outer" onclick="popup('outer')">
<div class="middle">
<div class="inner">

<div id="firstPopupDiv"> 
<p>You are here.</p>
</div>

</div>
</div>
</div>

</body>
</html>