Multiple Modal JavaScripts conflict

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

<!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>

The problem is that you’re assigning a function to window.onload twice, and so your code for the first modal gets overwritten, which is why only the second one works.
All you need to is initialise both modals inside one function, like this:

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";
    }

    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";}
}

Yay! It works! Thank you fretburner. I am just learning so I never would have figured that out. Now I know better.