首页 > 代码库 > 之前项目中用到的简单的自定义弹出提示框的实现，整理整理，当然开源的插件很多，但自己写的可以随意发挥
之前项目中用到的简单的自定义弹出提示框的实现，整理整理，当然开源的插件很多，但自己写的可以随意发挥
效果如下：
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绑定了多层点击函数。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。