21-解决方案
13.5.2 解决方案
使用jQuery，我们可以轻松地求出浏览器视窗的宽度和高度，并在整个网站设计上创建一个灰色层。然后，可以用CSS定位将自己的模态窗口（实际上是一个 <div> 层）居中放在网站内容之前，将用户的注意力吸引到它上面，如图13-6所示。这个窗口可以显示各种类型的内容，包括图像、Ajax加载的HTML片段和页面中的标记。
1．模态——HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<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>
2．模态——jQuery代码
// 初始化
function init_modal() {
// 元素存在吗?
if (!$('a.modal').length) {
//如果不存在,退出
return;
}
// 检测IE6(布尔值)
var $IE6 = typeof document.addEventListener !== 'function' && !window.XMLHttpRequest;
// 进行某些运算
function sizeModal() {
//模态窗口尺寸
var $modal = $('#modal_window');
var $modal_width = $modal.outerWidth();
var $modal_height = $modal.outerHeight();
var $modal_top = '-' + Math.floor($modal_height / 2) + 'px';
var $modal_left = '-' + Math.floor($modal_width / 2) + 'px';
// 设置模态
$('#modal_window').css('margin-top', $modal_top)
.css('margin-left', $modal_left);
}
/* 用于IE6 */
function positionModal() {
//强制设定模态窗口位置
$('#modal_wrapper').css('top', $(document).scrollTop() + 'px');
}
// 显示模态窗口
function showModal() {
if ($IE6) {
positionModal();
}
// 显示包装器
$('#modal_wrapper').show();
// 设置尺寸
sizeModal();
// 显示模态窗口
$('#modal_window').css('visibility', 'visible').show();
// 在图像加载时调整大小
$('#modal_content img').each(function() {
$(this).load(function() {
$(this).removeClass('modal_placeholder').show();
sizeModal();
});
});
}
//在<body>的最后插入模态窗口
$('body').append('
<div id="modal_wrapper">
<!--[if IE 6]>
<iframe id="modal_iframe"></iframe>
<![endif]-->
<div id="modal_overlay"></div>
<div id="modal_window">
<div id="modal_bar">
<strong>Modal window</strong>
<a href="#" id="modal_close">Close</a>
</div>
<div id="modal_content"></div>
</div>
');
// 查找模态链接
$('a.modal').click(function() {
//检查href="..."
var $the_link = $(this).attr('href');
// 确定链接目标
if ($the_link.match(/^#./)) {
// 如果是#anchor内容
$('#modal_content').html($($(this).attr('href')).html());
showModal();
} else if ($the_link.match(/.jpg$/) ||
$the_link.match(/.png$/) ||
$the_link.match(/.gif$/)) {
//如果是图像内容
$('#modal_content').html('
<p id="modal_image_wrapper">
<img src="' + $the_link + '" class="modal_placeholder" />
</p>
');
showModal();
} else {
// 如果是外部Ajax内容
$('#modal_content').load($(this).attr('href')
.replace('#', ' #'), '', showModal);
}
// 确定模态窗口标题
if ($(this).attr('title')) {
// 插入标题
$('#modal_bar strong').html($(this).attr('title'));
} else if ($(this).html() !== '') {
// 插入链接文本
$('#modal_bar strong').html($(this).html());
}
// Nofollow.
this.blur();
return false;
});
//隐藏模态元素
$('#modal_overlay, #modal_close').click(function() {
//隐藏模态窗口
$('#modal_wrapper').hide();
// 隐藏,因为图像可能在以后加载
$('#modal_window').css('visibility', 'hidden');
// 解除图像监听器绑定
$('#modal_content img').each(function() {
$(this).unbind();
});
// 删除模态内容
$('#modal_content').html('');
// 重置模态窗口标题
$('#modal_bar strong').html('Modal window');
// Nofollow.
this.blur();
return false;
});
// 如果是IE6,监听浏览器滚动
if ($IE6) {
$(window).scroll(function() {
if ($('#modal_wrapper').is(':visible')) {
positionModal();
}
});
}
}
// 启动
$(document).ready(function() {
init_modal();
});