标题消息就像 Stack Overflow 中一样

2024-04-15

这是我第一次访问堆栈溢出,我看到了一条漂亮的标题消息,其中显示了文本和关闭按钮。

标题栏是固定的,非常能吸引访问者的注意力。我想知道你们中是否有人知道获得相同类型标题栏的代码。


快速的纯 JavaScript 实现:

function MessageBar() {
    // CSS styling:
    var css = function(el,s) {
        for (var i in s) {
            el.style[i] = s[i];
        }
        return el;
    },
    // Create the element:
    bar = css(document.createElement('div'), {
        top: 0,
        left: 0,
        position: 'fixed',
        background: 'orange',
        width: '100%',
        padding: '10px',
        textAlign: 'center'
    });
    // Inject it:
    document.body.appendChild(bar);
    // Provide a way to set the message:
    this.setMessage = function(message) {
        // Clear contents:
        while(bar.firstChild) {
            bar.removeChild(bar.firstChild);
        }
        // Append new message:
        bar.appendChild(document.createTextNode(message));
    };
    // Provide a way to toggle visibility:
    this.toggleVisibility = function() {
        bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
    };
}

如何使用它:

var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

标题消息就像 Stack Overflow 中一样 的相关文章

  • 如何在 Angular 模板中嵌入 GitHub gist?

    角度忽略script其模板中包含标签 但加载 GitHub gist 需要它们 执行此操作的最佳做 法是什么 使用iframe 创造script动态标记 或者是其他东西 一种方法是创建一个iframe with script里面并在你希望你
  • 如何将这段 javascript 代码重写为 C++11?

    这是我在 Javascript Definitive Guide 中看到的 javascript 闭包代码 我想把它写成C 11 var uniqueID1 function var id 0 return function return
  • html 文件上传的默认文件夹和文件名

    我正在使用 jQuery Ajax 插件将图像文件从本地计算机上传到网络服务器 该网页呈现一个标记为Upload Image File 用户按下按钮并从浏览器显示的弹出目录列表中选择要上传的文件 服务器上的 PHP 存储图像文件 一切正常
  • 修复 PHP 中格式错误的 HTML?

    我正在根据用户提供的片段构建一个大型 HTML 文档 这些用户有以各种方式格式错误的烦人习惯 浏览器足够强大且宽容 但我希望能够验证并 理想情况下 修复任何格式错误的 HTML 如果可能的话 例如 td b Title b td 可以合理地
  • 如何在给定目标索引数组的情况下对数组进行就地排序?

    你如何对给定的数组进行排序arr in place给定目标索引数组ind 例如 var arr A B C D E F var ind 4 0 5 2 1 3 rearrange arr ind console log arr gt B E
  • 如何处理 React JSX 中的长类名?

    假设我在 React JSX 中渲染这个组件 render return h1 Some text h1 这些类触发我的 JS linter 的行太长 而且很难阅读 怎样才能分开长className将 React 组件中的属性分成多行而不破
  • JavaScript 中的凯撒密码

    我正在尝试编写一个程序来解决javascript中的以下问题 写在本段下面 我不知道为什么我的代码不起作用 有人可以帮助我吗 我是 JavaScript 新手 这是一个免费的代码训练营问题 现代常见的用法是 ROT13 密码 其中字母的值移
  • 飞碟中的外部 CSS

    我想知道如何在 Flying Saucer 中包含外部 CSS 在此之前THB我检查了所有可用的链接StackOverflow但它们没有帮助 这就是为什么我自己做这个的原因 TestCSS xhtml重命名版本TestCSS html 所以
  • 根据复选框显示/隐藏输入字段[重复]

    这个问题在这里已经有答案了 如果单击该复选框 它将显示一个输入字段 到目前为止它正在工作 但如果未选中该复选框 它应该隐藏它 我该怎么做 div class checkbox div
  • 查找 JavaScript 中函数参数的数量[重复]

    这个问题在这里已经有答案了 可能的重复 获取函数的元数 https stackoverflow com questions 4848149 get a functions arity 假设我有 function a x function b
  • EmberJS:如何为 ember-data RESTAdapter 中的模型提供特定的 URL?

    问题一 如果我有一个名为 Company 的余烬数据模型 我如何告诉它点击 businesses and businesses id而是检索记录 有没有办法指定给定模型的 url 更好的是 像 BackboneJS 一样 我可以在运行时计算
  • 如何从 WinRT StreamSocket 读取所有可用数据并清空 inputStream?

    我想在向套接字写入新数据之前读取当前正在等待套接字的所有数据 WinRT中的读取方法都是异步的 所以我不能简单地while直到套接字为空 由于我确实想丢弃套接字上的数据 因此我不想使用读取器 而是直接从套接字读取数据IInputStream
  • 使用XMLHttpRequest自动网页刷新内存泄漏

    问候 我一直在为一些使用 8 位微控制器的硬件开发网络界面 该网页使用 HTML javascript JSON 和 XHR XMLHttpRequest 进行通信 我想做的是创建一个页面 使用 setInterval 使用控制器中的新值每
  • 通过列计数拆分时重复表头

    我正在 Magento 中输出产品列表 作为包装在表格中的简单列表 由于此列表可能会很长 100 个以上产品 因此我使用了来自这里的想法 https stackoverflow com questions 21001803 how to h
  • 为什么行框之间有空格,而不是由于半行距?

    在下面的代码示例中 您将看到垂直流动的之间有空白spans是 每个之间有空白line box 我想首先声明这与之间的差距无关inline block框 甚至是结果半领先 https www w3 org TR CSS21 visudet h
  • Kotlin JavaScript 到 TypeScript 定义文件

    我已经找到了ts2kt 库 https github com Kotlin ts2kt这将从任意位置创建 Kotlin 头文件 d ts文件 但是 我想朝相反的方向走 我想构建一个可以编译为 JavaScript 的 Kotlin 库 但我
  • 如何使用 Typescript 设置 Material-UI for React?

    我在将 Material UI 添加到我的 React 项目中时遇到了一些问题 该项目是用 Typescript 编程的 根据教程 我首先添加react tab event plugin import injectTapEventPlugi
  • “x modulo y”的结果是什么?

    引用 ECMAScript 规范第 5 2 节 符号 x modulo y y 必须是有限且非零 计算 值 k 与 y 具有相同的符号 或零 使得 abs k 因此 如果 y 为正 则 x modulo y 的结果 k 为正 无论 x 的符
  • 仅使用 javascript 获取网站的正文元素

    我想检索以下网站的正文内容http sports espn go com nhl bottomline scores nhl s left1 http sports espn go com nhl bottomline scores nhl
  • 使用 JQueryUI Autocomplete 和 Meteor 的规范方法

    使用 Meteor 我想了解使用 JQuery UI 自动完成处理大量服务器端数据的最有效方法 我有两个工作提案 想听听关于差异的意见 以及是否有更好的方法来做同样的事情 使用发布 订阅 Server Meteor publish auto

随机推荐