.<!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">
.<head>
. <title>使用jquery弹出层和点击空白处隐藏层</title>
. <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
. <script type="text/javascript">
. $(function () {
. $('#btnShow').click(function (event) {
. //取消事件冒泡
. event.stopPropagation();
. //设置弹出层的位置
. var offset = $(event.target).offset();
. $('#divTop').css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
. //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
. $('#divTop').toggle('slow');
. });
. //点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。
. $(document).click(function (event) { $('#divTop').slideUp('slow') });
. $('#divTop').click(function (event) { $(this).fadeOut(1000) });
. })
. </script>
.</head>
.<body>
.<div>
.<br />
.<input type="button" id="btnShow" value="显示提示内容" />
.</div>
.<div id="divTop"
. style=" background-color:#99CCFF; border: solid 2px #ff0000; position:absolute; display:none; width:400px; height:200px;">
.<div style="text-align:center;">点击本区域或空白隐藏弹出层</div>
.</div>
.</body>
.</html>
01-31
1520
1520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
