随缘 » 使用jquery简单实现popup/tooltip的插件效果

首页 > Javascript > 使用jquery简单实现popup/tooltip的插件效果

使用jquery简单实现popup/tooltip的插件效果

2009年4月7日

一个小项目需要用到窗口提示, 并且能在提示窗口中进行一些简单操作, 在网上找了找jquery的tooltip和popup, wow! 一大堆, 看的有点头晕眼花, 索性自己写了一个简单的, 代码很简单, 有需要的可以适当的再扩展一下, 比如对提示窗口进行CSS设计一下.还是那句老话, 适合自己用的就是最好的.

本脚本需要jquery1.2.6+以上版本支持.

/*
 * Popup/Tooltip script 
 * powered by jQuery (http://www.jquery.com)
 * 
 * written by flywolf (http://www.suiyuan.org)
 * 04/07/2009 16:22
 */
 
/*
 * 弹出窗口/提示脚本
 * @param css 要弹出窗口的HTML元素CSS样式名
 * @param delay 弹出窗口是否可以点击
 */
this.popup = function(css, delay) {
    // 首先创建提示窗口
    $('body').append('<div id="PopWin">My Popup Window</div>');
    $('#PopWin').css({
        'position': 'absolute',
        'display': 'none',
        'width': '200px',
        'height': '100px',
        'border': '1px solid #333'
    })
 
    // 鼠标进入时提示窗口是否需要停留
    if (delay) {
        $('#PopWin').mouseover(function() {
            $(this).show();
        }).mouseout(function() {
            $(this).hide();
        })
    }
 
    // 对于所有css样式为popcss的a连接添加鼠标动作
    // 显示/隐藏提示窗口
    $('a.' + css).mouseover(function() {
        $('#PopWin').css({
            'left': $(this).offset().left + $(this).width(),
            'top': $(this).offset().top
        }).show();
    }).mouseout(function() {
        $('#PopWin').hide();
    });
}

演示页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="popup.js"></script>
  <script type="text/javascript">
	$(function(){
		popup('popcss', 1);
	})
  </script>
 </HEAD>
 
 <BODY>
 <p>
	<a href="#" class="popcss">DIV提示窗口</a>
  </p>
 <p>
	<a href="#" class="popcss">DIV提示窗口1</a>
  </p>
 </BODY>
</HTML>