<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="false" /> <title>jQuery Cookbook - Ch.13 - Displaying a Simple Modal Window</title> <link rel="stylesheet" type="text/css" href="../_common/basic.css" /> <link rel="stylesheet" type="text/css" href="modal.css" /> <script type="text/javascript" src="../_common/jquery.js"></script> <script type="text/javascript" src="modal.js"></script> </head> <body> <div id="container"> <a href="#modal_anchor" class="modal">In-page</a> | <a href="modal_markup.html#load_me" class="modal">Remote markup</a> | <a href="modal_text.txt" class="modal">Remote text</a> | <a href="../_common/photo_1.jpg" class="modal" title="Baltic Sea - Estonia">Image file</a>. <br /> <br /> <select><option>-- SHOULD BE OVERLAPPED IN IE6 --</option></select> <br /> <br /> <div id="modal_anchor"> <p> This content will be copied into the modal window, if its #anchor is targeted. </p> </div> Lots of line breaks, to simulate scrolling content... <br /> It's the end of the world, as we know it, and I feel fine. </div> </body> </html>
Modalâ&#x20AC;&#x201D;jQuery code // Initialize. function init_modal() { // Does element exist? if (!$('a.modal').length) {
}
// If not, exit. return;
// Detect IE6 (boolean). var $IE6 = typeof document.addEventListener !== 'function' && !window.XMLHttpRequest; // Do some math. function sizeModal() { // Modal dimensions. var $modal = $('#modal_window'); var $modal_width = $modal.outerWidth(); var $modal_height = $modal.outerHeight(); var $modal_top = '-' + Math.floor($modal_height / 2) + 'px';
298 | Chapter 13:â&#x20AC;&#x201A;Interface Components from Scratch