Menu icon Foundation
onload event modal

Does anyone know how to trigger an onload event for a modal reveal?

I call a href modal with ajax. A small php page that should load a map and draw a polygon.

My issue is that I have 'onload=' tags everywhere in the page, but it will not fire the event.

I've added a button to fire the script, and it works, but I've tried many different ways to get this to fire, but no luck.

If you call the page directly in the browser, it works, but not in the modal.

It is here: http://absoluteorganics.com/modalMapDebug.html

Any suggestions?

<!-- used in calling page-->

<a href="maptestDebug.php" data-reveal-id="myMapModal" data-reveal-ajax="true">
  <img src="images/image_map.gif" >
</a>
<div id="myMapModal" class="reveal-modal" data-reveal></div>
</div>
            

         

   <!-- BODY PORTION OF HTML -->   
   <body onload="getMap();">
     <div>
       <input type="button" value="Show delivery Map" onclick="getMap();" onload="getMap();" />
     </div>
     <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
     <input type="hidden" onload="getMap();" />
     <a class="close-reveal-modal">&#215;</a>
  </body>
            

         

newmodal

Does anyone know how to trigger an onload event for a modal reveal?

I call a href modal with ajax. A small php page that should load a map and draw a polygon.

My issue is that I have 'onload=' tags everywhere in the page, but it will not fire the event.

I've added a button to fire the script, and it works, but I've tried many different ways to get this to fire, but no luck.

If you call the page directly in the browser, it works, but not in the modal.

It is here: http://absoluteorganics.com/modalMapDebug.html

Any suggestions?

<!-- used in calling page-->

<a href="maptestDebug.php" data-reveal-id="myMapModal" data-reveal-ajax="true">
  <img src="images/image_map.gif" >
</a>
<div id="myMapModal" class="reveal-modal" data-reveal></div>
</div>
            

         

   <!-- BODY PORTION OF HTML -->   
   <body onload="getMap();">
     <div>
       <input type="button" value="Show delivery Map" onclick="getMap();" onload="getMap();" />
     </div>
     <div id='myMap' style="position:relative; width:800px; height:600px;"></div>
     <input type="hidden" onload="getMap();" />
     <a class="close-reveal-modal">&#215;</a>
  </body>
            

         
Rafi Benkual almost 5 years ago

You can try calling it like this: http://codepen.io/winghouchan/pen/AbrsJ/

 $(document).ready(function(){$('#myModal').foundation('reveal', 'open')});

Stephen None almost 5 years ago

The Modal appears, but it does not fire an onload event to run the GetMap function. Need to use ajax to call the php page with the map script.

Stephen None almost 5 years ago

Does anyone know if there is anything in foundation.reveal.js that gets passed to the modal that I can use to call a function in the modal?