代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>HTML5学堂 - alert</title>

</head>

<body>

    <script>

        window.alert = alert;

        function alert(data) {

            var a = document.createElement("div"),

                title = document.createElement("p"),

                content = document.createElement("p"),

                btn = document.createElement("div"),

                textNode = document.createTextNode(data ? data : ""),

                btnText = document.createTextNode("确定");

            // 控制样式

            css(a, {

                "width" : "430px",

                "height" : "120px",

                "border": "1px solid #000",

                "margin" : "0 auto"

            });

            css(btn, {

                "background-color": "#008CBA",

                "border": "none",

                "color": "white",

                "padding": "8px 28px",

                "text-align": "center",

                "text-decoration": "none",

                "display": "inline-block",

                "font-size": "8px",

                "float" : "right"

            });

            css(title, {

                "font-size" : "18px",

                "width" : "250px",

                "height" : "20px"

            });

            css(content, {

                "font-size" : "14px",

                "width" : "250px",

                "height" : "20px",

                "text-align": "center"

            })

            // 内部结构套入

            title.appendChild(document.createTextNode("友情提示："));

            content.appendChild(textNode);

            btn.appendChild(btnText);

            a.appendChild(title);

            a.appendChild(content);

            a.appendChild(btn);

            // 整体显示到页面内

            document.getElementsByTagName("body")[0].appendChild(a);

            // 确定绑定点击事件删除标签

            btn.onclick = function() {

                a.parentNode.removeChild(a);

            }

        }

        function css(targetObj, cssObj) {

            var str = targetObj.getAttribute("style") ? targetObj.getAttribute("style") : "";

            for(var i in cssObj) {

                str += i + ":" + cssObj[i] + ";";

            }

            targetObj.style.cssText = str;

        }

        alert("用户名不能为空");

    </script>

</body>

</html>

效果图如下：

html更改弹窗样式（原创，转载需声明）的更多相关文章

  1. ios 继承UITableViewController,更改tableview样式

    // 继承UITableViewController,更改tableview样式 - (instancetype)initWithStyle:(UITableViewStyle)style { ret ...

  2. 初识quartz 并分析 项目中spring整合quartz的配置【原创+转载】

    初识quartz 并分析 项目中spring整合quartz的配置[原创+转载]2018年01月29日 12:08:07 守望dfdfdf 阅读数:114 标签: quartz 更多个人分类: 工具 ...

  3. JavaScript--动态更改CSS样式

    JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> ...

  4. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  5. 【javascript】原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  6. 如何在PeopleSoft中找到并更改默认样式表名称

    PeopleSoft的默认样式表名称是用来控制应用程序的外观的.在PeopleSoft中可以使用集中样式表来更改应用程序的外观,oracle为每个应用程序版本设置了默认的样式表. 下面是不同应用程序版 ...

  7. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  8. 零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式

    原文:零元学Expression Blend 4 - Chapter 28 ListBox的基本运用与更改预设样式 本章将先教大家认识ListBox的基本运用与更改预设样式 本章将先教大家认识List ...

  9. DataGridView 更改Header样式

    '必须先设置 EnableHeadersVisualStyles 属性 才能设置Header颜色dgv.EnableHeadersVisualStyles = Falsedgv.ColumnHeade ...

随机推荐

  1. sql在单引号的声明标志着嵌套问题

    在sql声明,我们将不可避免地使用嵌套单引号什么时候.但它肯定不是一个直接嵌套,java使用反斜杠做到这一点是不够的.在sql这是做一个单引号逃逸. 例如,下面的例子是展示一个示例存储过程的语句进行查 ...

  2. 使用Qt installer framework制作安装包（不知道是否适合Mac和Linux？）

    一.介绍 使用Qt库开发的应用程序,一般有两种发布方式:(1)静态编译发布.这种方式使得程序在编译的时候会将Qt核心库全部编译到一个可执行文件中.其优势是简单单一,所有的依赖库都集中在一起,其缺点也很 ...

  3. C++该typeid和dynamic_cast

    1.typeid在没有虚拟函数的(不相关的动态绑定),typeid它只返回操作对象的实际类型 2.typeid涉及到动态联编问题时(使用基类指针p或者引用p操作派生类对象),typeid(p)返回基类 ...

  4. 实现js呼叫流行

    <span style="font-size:14px;">//Html代码:单击控制实现通话"收件人流行" <!DOCTYPE html&g ...

  5. C和指针 （pointers on C）——第十二章：利用结构和指针

    第十二章 利用结构和指针 这章就是链表.先单链表,后双向链表. 总结: 单链表是一种使用指针来存储值的数据结构.链表中的每一个节点包括一个字段,用于指向链表的下一个节点. 有一个独立的根指针指向链表的 ...

  6. apt-spy 软件源更新

    ebian上的apt-get是最快的软件安装方式,不过要用好apt-get,首先得需要找到最快的源,这样安装软件的时候才能获得好的速度,用起来才能得心应手. 有的源在用了一段以后,就会失效,这个时候, ...

  7. jquery模拟飞秋

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  8. Windows系统CPU内存网络性能统计第一篇 内存

    最近翻出以前做过的Windows系统性能统计程序,这个程序可以统计系统中的CPU使用情况,内存使用情况以及网络流量.现在将其整理一下(共有三篇),希望对大家有所帮助. 目录如下: 1．<Wind ...

  9. Advanced Installer 打包后，安装包在WIN10下重启后再次运行安装的解决办法

    原文:Advanced Installer 打包后,安装包在WIN10下重启后再次运行安装的解决办法 前几个月使用Advanced Installer 打包了一堆安装包,其中有使用默认主题的,也有根据 ...

  10. 无法解决 equal to 操作中 "SQL_Latin1_General_CP1_CI_AS" 和 "Chinese_PRC_CI_AS" 之间的排序规则冲突。

    无法解决 equal to 操作中 "SQL_Latin1_General_CP1_CI_AS" 和 "Chinese_PRC_CI_AS" 之间的排序规则冲突 ...