首页 > 代码库 > 之前项目中用到的简单的自定义弹出提示框的实现，整理整理，当然开源的插件很多，但自己写的可以随意发挥

之前项目中用到的简单的自定义弹出提示框的实现，整理整理，当然开源的插件很多，但自己写的可以随意发挥

2024-07-13 18:55:49   219人阅读

效果如下：

QQ20140724121326

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="http://www.mamicode.com/img/x.png"/><div class="popupcontent"></div><img src="http://www.mamicode.com/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 = http://www.mamicode.com/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绑定了多层点击函数。


联系
我们