浮出提示框的定位

来源：互联网发布：福建省网络广播电视台编辑：程序博客网时间：2024/06/05 18:18

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divall">

    </div>
    <input type="button" value="Click Me" id="clickbtn" />
    <div id="tips" style="position:absolute; width:200px; height:200px; border:1px solid silver; display:none;">

    </div>
    <div style="clear:both;"></div>
    </form>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#clickbtn").click(function() {
                var str = $("#divall").html();
                str += "<div style=/"float:left; width:100px; height:40px; border:1px solid silver;/"></div>";
                $("#divall").html(str);
                $("#divall").find("div").each(function(index) {
                    $(this).bind("click", function() {
                        if ($("#tips").css("display") == "none") {
                            $("#tips").css("display", "block");
                            $("#tips").html("这是第" + index + "个div");
                            var TipDiv = $("#tips");
                            var tdOffset = $(this).offset();
                            var left = tdOffset.left - TipDiv.width() + 70;
                            var top = tdOffset.top + 26;
                            ShowTip(left, top);
                        } else {
                            $("#tips").css("display", "none");
                        }
                    });
                });
            });
            function ShowTip(left, top) {
                var TipDiv = $("#tips");
                TipDiv.css({ "left": left, "top": top }).show();
            }
        });
    </script>
</body>
</html>

注：宽和高可以自己按实际情况修改。