浮出提示框的定位

最新推荐文章于 2022-05-09 14:37:21 发布

sunsanyou2004

最新推荐文章于 2022-05-09 14:37:21 发布

阅读量808

点赞数

文章标签： function div border server button float

本文链接：https://blog.csdn.net/sunsanyou2004/article/details/6456433

版权

<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>