SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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


    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>

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,433
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    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:
    Code 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";
        }
     
        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";}
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yay! It works! Thank you fretburner. I am just learning so I never would have figured that out. Now I know better.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •