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"> </div><div id="modal_fader"> </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>