简单的自定义弹出提示框

效果如下：

html代码：

<div class="container">
            <div class="wrapper" style="background-color:white; position:relative;">
                <div class="box" style="background-color:red; position:absolute; left:100px; top:300px; width:100px;height:100px;">click on me!</div>
            </div>
        </div>

CSS代码：

#contentPopup
    {
        position: absolute;
        display: none;
        z-index:10;
    }
    #contentPopup
    {
        width:336px;
        
    }
    #contentPopup img
    {float:left;
     margin-left:110px;     
    }
    #contentPopup .popupcontent
    {
        background-color:#dddfe6;
        color:#192e59;
        font-weight:bold;
        font-size:16px;    
        width:300px;    
        float:left;  
        padding:16px;
        border-top-right-radius:10px;

    }
     #contentPopup .close
    {        
        left:190px;
        top:2px;
        position:absolute;
        cursor:pointer;    
    }
    .itemOver
    {
        color:#ffcb05;
    }

Js/Jquery代码如下：

function stopEvent() {
                if (window.event)
                    event.cancelBubble = true;
                else
                    e.stopPropagation();
            }
            (function () {
                jQuery(document).ready(function ($) {
                    $("body").append('<div id="contentPopup" class="popup"><img class="close" src="img/x.png"/><div class="popupcontent"></div><img src="img/pop-up-arrow-down.png" /></div>');

                    $(".box").on("click", function (e) {
                        hidePopup();
                        applyBackground();
                        showPopup(e);
                    });
                    $(".close").on("click", function (e) {
                        hidePopup();
                    });
                });
                function applyBackground() {
                    if ($("#bg").length == 0) {
                        $("body").append('<div id="bg" class="popup" style="display:none;z-index:9;position:absolute;filter:alpha(opacity = 30);opacity:0.3;" onclick="hidePopup();"></div>');
                        $("#bg").height($(document).height()).width($(document).width()).css({ "left": "0px", "top": "0px" });
                    }
                    $("#bg").show();
                }
                function showPopup(e) {
                    var src = e.target ? e.target : e.srcElement;
                    if (!$(src).hasClass("box")) return;
                    $(src).addClass("itemOver");
                    var pos = $(src).offset();
                    $("#contentPopup").children("div").html("Please add your popup content here!");
                    $("#contentPopup").css({ "left": (pos.left - 70) + "px", "top": (pos.top - $("#contentPopup").height()) + "px" });
                    $("#contentPopup").show();
                }
                function hidePopup() {
                    $(".popup").hide();

                }
            }());

实现原理比较简单，预先把popup的内容绝对定位并设z-index为顶层，加载入body先隐藏，点击后就获取点击的节点元素位置按相应的位置show出来，要注意设置事件冒泡（stopEvent()），因为很可能你对box绑定了多层点击函数。