I have a simple modal javascript. On one page I need to use two modals and they conflict.

I have changed the names of the variables, css ID's and classes. The modals each work separately but when I put them together only the bottom script works (whichever of the two that is the last).

I do not see why.

Any ideas?

Thank you in advance. Here is code and a test link:

http://craigwebbart.com/csw/double-modal_test01.htm


Code:
<!DOCTYPE html>
<html lang="en" dir="ltr" class="no-js">
<head>
<meta charset="utf-8" />
<meta name="author" content="Craig Webb Art" />

<!-- This: double-modal_test01.htm 061213 -->
<title>Double Modal Test</title>

#modal_fader {
    background: cornflowerblue;
    opacity: .3;
    -moz-opacity: .3;
    filter: alpha(opacity=30);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: none;
}
#modal_box {
    width: 50%;
background:#FFF;
    border: 1px cornflowerblue solid;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
border-radius: .5em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10em 0 0 -25%;
    z-index: 10;
  	display: none;
}

#modal_box:after,
.mod:after
 {
 clear: both;
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
}

.modal-btn,
.modal-close-btn {
	font-size: 1em;
	line-height: 1em;
	padding: .375em 1em;
	background: #FFF;
	border: 1px #ddd solid;
	margin: 0 auto;
	cursor: pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

#map_fadar {
    background: cornflowerblue;
    opacity: .3;
    -moz-opacity: .3;
    filter: alpha(opacity=30);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    display: none;
}
#map_box {
    background:#FFF;
    width: 50%;
    padding:1em 1em 0;
    border: 1px cornflowerblue solid;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -22em 0 0 -25%;
    z-index: 10;
  	display: none;
}

#map_box:after,
.mod:after
 {
 clear: both;
 content: ".";
 display: block;
 height: 0;
 visibility: hidden;
}

.map-btn,
.map-close-btn {
	font-size: 1em;
	line-height: 1em;
	padding: .375em 1em;
	background: #FFF;
	border: 1px #ddd solid;
	margin: 0 auto;
	cursor: pointer;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

</style>
</head>
<body>
<div id="map_fadar">&nbsp;</div><div id="modal_fader">&nbsp;</div>

<div><a href="#" id="mapBtn" class="map-btn">Open Map Box</a></div><br />

<div><a href="#" id="modalBtn" class="modal-btn">Open Modal Box</a></div>




<!-- MAP MODAL  -->
<div id="map_box">
<p>This is the MAP MODAL BOX</p>
<span id="map-closeBtn" class="map-close-btn">Close Window</span><br />
</div><!-- END Map_box  -->

<!-- *   *   *   *   *   *   *    -->
<!--  SOCIAL MODAL BOX  -->
<div id="modal_box">

<p>This is the SOCIAL MODAL BOX</p>
<span id="modal-closeBtn" class="modal-close-btn">Close Window</span><br />
</div><!-- END Modal_box  -->

<!-- *   *   *   *   *   *   *    -->


<!-- MapJavaScript -->
<script type="text/javascript">
window.onload=function() {
var map_btn = document.getElementById('mapBtn');
var fadar = document.getElementById('map_fadar');
var map_box = document.getElementById('map_box');
var closemap = document.getElementById('map-closeBtn');
//Display modal box
map_btn.onclick=function() {
   fadar.style.display = "block";
   map_box.style.display = "block";}
//Hide map Box
closemap.onclick = function() {
	fadar.style.display = "none";
	map_box.style.display = "none";}}
</script>

<!-- ModalJavaScript -->
<script type="text/javascript">
window.onload=function() {
var modal_btn = document.getElementById('modalBtn');
var fader = document.getElementById('modal_fader');
var modal_box = document.getElementById('modal_box');
var closemodal = document.getElementById('modal-closeBtn');
//Display modal box
modal_btn.onclick=function() {
   fader.style.display = "block";
   modal_box.style.display = "block";}
//Hide modal Box
closemodal.onclick = function() {
	fader.style.display = "none";
	modal_box.style.display = "none";}}
</script>

</body>
</html>