自己封装的一个纯div+css样式弹出泡泡消息框_html/css

首页

web前端

html教程

自己封装的一个纯div+css样式弹出泡泡消息框_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:44 AM

    也许很多框架都自带了这样的弹出泡泡框，但我没接触过，现在需要用，于是便自己封装了一个，虽然还不完美，但已经可以用了。这个小控件可以重定义样式，通过传递配置参数，或修改默认配置参数都可以进行样式调整。不管怎么说，就当是练手，或给新人提供一个参考学习的机会也行吧

/*  * js 对象合并  */function extend(newObj, defaultObj) {    var result = {};    for (var p in defaultObj) {         result[p] = defaultObj[p];        if (typeof (defaultObj[p]) == " function ") {            defaultObj[p]();        } else {             for (var q in newObj) {                 if (p == q) {                    result[p] = newObj[q];                }            }        }    }     return result;}/*  * 弹出泡泡的默认样式 */var popMsgDefaultConfig = {    containner: $(document.body),  //相对定位的dom对象或对象的id.    cuspStyle: "topleft",          //相对定位的dom对象方位(topleft,topright,bottomleft,bottomright,leftup,leftdown,rightup,rightdown)    cuspLength: 30,                //尖角长度    cuspWidth: 15,                 //尖角宽度    contentWidth: 160,             //消息文本框宽度    contentHeight: 60,             //消息文本框的高度    borderWidth: 2,                //边框宽度    borderColor: "red",            //边框颜色    backColor: "#EC90F6",          //背景色    cuspShift: "60%",              //尖角位于消息内容框上/下时，指左位移，尖角位于消息内容框左/右时，指的上位移。    contentShift: "20%",           //弹出框位于目标框上/下时，指左位移，弹出框位于目标框左/右时，指的上位移。    textStyle: 'color: blue; font-size:small; font-family:"Microsoft YaHei";font-style:italic;'}/*  * 弹出泡泡的方法 * containner: 泡泡指向的dom对象id * text: 需要显示的消息内容 * popMsgConfig： 自定义样式 * Example: popMsgShow("divUserName", "这是一个提示消息" { backColor: "gray", borderColor: "white", cuspStyle: "topleft",borderWidth: 1}); */function popMsgShow(containner, text, popMsgConfig) {    popMsgClose();    var config = extend(popMsgConfig, popMsgDefaultConfig);    //边框样式    var obj = $("#" + containner);    var offset = obj.offset();    var popMsg = $("<div id="divPopMsg" style="position:fixed;"></div>");    var popContent = $("<div id="divContent" style='vertical-align:middle;text-align:center; line-height: " + config.contentHeight + "px;" + " height: " + config.contentHeight + "px" + "; width: " + config.contentWidth + "px" + "; border: " + config.borderColor + " solid;border-radius: 6px;background-color: " + config.backColor + "; " + config.textStyle + "'>" + text + "</div>");    var popCusp = $("<div id="divCusp" style="width: 0; height: 0; position:relative;"></div>");    var popCuspInner = $("<div id="divCuspInner" style="position: absolute;"></div>");    popContent.css({ borderWidth: config.borderWidth + "px", borderColor: config.borderColor, backgroundColor: config.backColor });    popCusp.append(popCuspInner);    popMsg.append(popContent);    if (config.cuspStyle == "topleft")    {        var innerTop = (config.cuspLength - 3*config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2*config.borderWidth) + "px";        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ borderTopWidth: config.cuspLength + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderRightWidth: config.cuspWidth + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });        popCuspInner.css({ borderTopWidth: innerTop, borderTopStyle: "solid", borderTopColor: config.backColor, borderRightWidth: innerWidth, borderRightStyle: "solid", borderRightColor: "transparent", top: "-" + config.cuspLength + "px", left: config.borderWidth + "px" });        popMsg.css({ top: (offset.top - config.contentHeight - config.cuspLength) + "px", left: msgLeft });        popMsg.append(popCusp);    }    if (config.cuspStyle == "topright") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ borderTopWidth: config.cuspLength + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderLeftWidth: config.cuspWidth + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });        popCuspInner.css({ borderTopWidth: innerTop, borderTopStyle: "solid", borderTopColor: config.backColor, borderLeftWidth: innerWidth, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + config.cuspLength + "px", left: "-" + (config.cuspWidth - config.borderWidth) + "px" });        popMsg.css({ top: (offset.top - config.contentHeight - config.cuspLength) + "px", left: msgLeft });        popMsg.append(popCusp);    }    if (config.cuspStyle == "bottomleft") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ borderBottomWidth: config.cuspLength + "px", borderBottomStyle: "solid", borderBottomColor: config.borderColor, borderRightWidth: config.cuspWidth + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });        popCuspInner.css({ borderBottomWidth: innerTop, borderBottomStyle: "solid", borderBottomColor: config.backColor, borderRightWidth: innerWidth, borderRightStyle: "solid", borderRightColor: "transparent", top: (4 * config.borderWidth) + "px", left: config.borderWidth + "px" });        popMsg.css({ top: (offset.top + obj.height()) + "px", left: msgLeft });        popCusp.insertBefore(popContent);    }    if (config.cuspStyle == "bottomright") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.left + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.width() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ borderBottomWidth: config.cuspLength + "px", borderBottomStyle: "solid", borderBottomColor: config.borderColor, borderLeftWidth: config.cuspWidth + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginTop: "-" + config.borderWidth + "px", marginLeft: config.cuspShift });        popCuspInner.css({ borderBottomWidth: innerTop, borderBottomStyle: "solid", borderBottomColor: config.backColor, borderLeftWidth: innerWidth, borderLeftStyle: "solid", borderLeftColor: "transparent", top: (3*config.borderWidth) + "px", left: "-" + (config.cuspWidth - config.borderWidth) + "px" });        popMsg.css({ top: (offset.top + obj.height()) + "px", left: msgLeft });        popCusp.insertBefore(popContent);    }    if (config.cuspStyle == "leftup") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ float: "left", borderTopWidth: config.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderLeftWidth: config.cuspLength + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2*config.borderWidth) + "px" });        popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: config.backColor, borderLeftWidth: innerTop, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + (config.cuspWidth - config.borderWidth) + "px", left: "-" + (config.cuspLength - 4*config.borderWidth) + "px" });        popMsg.css({ top: msgLeft, left: (offset.left + obj.width() + config.cuspLength) + "px" });        popContent.css({float: "right"});        popCusp.insertBefore(popContent);    }    if (config.cuspStyle == "leftdown") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ float: "left", borderTopWidth: config.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderLeftWidth: config.cuspLength + "px", borderLeftStyle: "solid", borderLeftColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2*config.borderWidth) + "px" });        popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: config.backColor, borderLeftWidth: innerTop, borderLeftStyle: "solid", borderLeftColor: "transparent", top: "-" + (config.cuspWidth - config.borderWidth) + "px", left: "-" + (config.cuspLength - 4 * config.borderWidth) + "px" });        popMsg.css({ top: msgLeft, left: (offset.left + obj.width() + config.cuspLength) + "px" });        popContent.css({float: "right"});        popCusp.insertBefore(popContent);    }    if (config.cuspStyle == "rightup") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ float: "right", borderTopWidth: config.cuspWidth + "px", borderTopStyle: "solid", borderTopColor: config.borderColor, borderRightWidth: config.cuspLength + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2 * config.borderWidth) + "px" });        popCuspInner.css({ borderTopWidth: innerWidth, borderTopStyle: "solid", borderTopColor: config.backColor, borderRightWidth: innerTop, borderRightStyle: "solid", borderRightColor: "transparent", top: "-" + (config.cuspWidth - config.borderWidth) + "px", left: "-" + config.borderWidth + "px" });        popMsg.css({ top: msgLeft, left: (offset.left - popContent.width() - config.cuspLength) + "px" });        popContent.css({ float: "left" });        popCusp.insertBefore(popContent);    }    if (config.cuspStyle == "rightdown") {        var innerTop = (config.cuspLength - 3 * config.borderWidth) + "px";        var innerWidth = (config.cuspWidth - 2 * config.borderWidth) + "px";        var msgLeft = (offset.top + (config.contentShift.indexOf("px") > 0 ? parseInt(config.contentShift) : obj.height() * parseInt(config.contentShift) / 100)) + "px";        popCusp.css({ float: "right", borderBottomWidth: config.cuspWidth + "px", borderBottomStyle: "solid", borderBottomColor: config.borderColor, borderRightWidth: config.cuspLength + "px", borderRightStyle: "solid", borderRightColor: "transparent", marginLeft: "-" + config.borderWidth + "px", marginTop: (config.cuspWidth - 2 * config.borderWidth) + "px" });        popCuspInner.css({ borderBottomWidth: innerWidth, borderBottomStyle: "solid", borderBottomColor: config.backColor, borderRightWidth: innerTop, borderRightStyle: "solid", borderRightColor: "transparent", top: config.borderWidth + "px", left: "-" + config.borderWidth + "px" });        popMsg.css({ top: msgLeft, left: (offset.left - popContent.width() - config.cuspLength) + "px" });        popContent.css({ float: "left" });        popCusp.insertBefore(popContent);    }    $(document.body).append(popMsg);}     /*  * 关闭泡泡的方法 */function popMsgClose() {    var popmsg = $("#divPopMsg");    if (popmsg) {        $("#divPopMsg").remove();    }}

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

See all articles