Paul Posted October 16, 2012 Share Posted October 16, 2012 Hey all, I'm working on Larry's example of a modal window in chapter 9. I've typed up all the code and tested it and the 'show window' button doesn't show the window. I've checked and rechecked the code and I can't see what I've done wrong. This is the modal content @charset "utf-8"; /* CSS Document */ #modal { display:none; position:absolute; left:0px; right:0px; width:100%; height:100% } #modalMask { position:absolute; left:0px; top:0px; width:100%; height:100% background-color:#eee; z-index:1000; opacity:0.9; filter:alpha(opacity=90); -moz-opacity: 0.9; } #modalContent { position:relative; width:3000px; margin:15px auto; padding:15px; background-color#fff; border:1px solid #000; text-align:center; z-index:9999; } // Javascript Document function openModal() { 'use strict' document.getElementById('closeModal').onclick = closeModal; document.getElementById('modal').style.disply = 'inline-block'; document.getElementById('openModal').onclick = null; } function closeModal() { 'use strict' document.getElementById('openModal').onclick = openModal; document.getElementById('modal').style.disply = 'none'; document.getElementById('closeModal').onclick = null; } window.onload = function() { 'use strict' document.getElementById('openModal').onclick = openModal; }; Thanks for any help anyone can give. Paul Link to comment Share on other sites More sharing options...
Paul Posted October 16, 2012 Author Share Posted October 16, 2012 sorry the HTML seems to have disappeared. Does this work? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>A modal window</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link href="modal.css" rel="stylesheet" id="css" type="text/css"> </head> <body> <input type="button" id="openModal" value="Show window"> <div id="modal"> <div id="modalMask"> </div> <div id="modalContent"> <p>This is the modal content</p> <input type="button" id="closeModal" value="Close"> </div> </div> <script src="modal.js"></script> </body> </html> Link to comment Share on other sites More sharing options...
Jaepee Posted October 17, 2012 Share Posted October 17, 2012 Display is spelled incorrectly... document.getElementById('modal').style.disply 1 Link to comment Share on other sites More sharing options...
Paul Posted October 17, 2012 Author Share Posted October 17, 2012 Ah, I see that know. Thanks for that. Cheers Paul Link to comment Share on other sites More sharing options...
Recommended Posts