代码如下：

<!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. 微信小程序 获取用户信息 encryptData解密 C#版本

    最近学习小程序开发,需要对encryptData解密,获取用户信息,官方源码没有C#版本,网上的资料比较杂,有的使用还有问题,下面贴一下自己亲试可以使用的一个源码 1.code 换取 session_ ...

  2. HDU 1618 Oulipo KMP解决问题的方法

    鉴于两个字符串,寻找一个字符串的频率,另一个字符串出现. 原版的kmp另一个陷阱.以下凝视了,标不是踩着好,有加班一定几率,也有机会错误,根据不同的字符串可以是详细. 变化看起来像一个,kmp速度是非 ...

  3. python实现身份证校验位计算

    身份证校验码的计算方法 1.将前面的身份证号码17位数分别乘以不同的系数.第i位对应的数为[2^(18-i)]mod11.从第一位到第十七位的系数分别为:7 9 10 5 8 4 2 1 6 3 7 ...

  4. OpenGL（十一） BMP真彩文件的显示和复制操作

    glut窗口除了可以绘制矢量图之外,还可以显示BMP文件,用函数glDrawPixels把内存块中的图像数据绘制到窗口上,glDrawPixels函数原型: glDrawPixels (GLsizei ...

  5. Windows PowerShell 集成脚本环境 (ISE)

    应用场景 有时会遇到一些这样的报错 Exception calling "SetData" with "2" argument(s): "Type ' ...

  6. 【C#】【WPF】如何读写app.config文件

    WPF生成的项目中会有.exe.config.一般是系统默认配置的 格式是xml格式,C#的项目可以直接读写这些文件.方法代码如下. public static string GetConnectio ...

  7. MVVMLight 实现指定Frame控件的导航

    原文:MVVMLight 实现指定Frame控件的导航 在UWP开发中,利用汉堡菜单实现导航是常见的方法.汉堡菜单导航一般都需要新建一个Frame控件,并对其进行导航,但是在MvvmLight框架默认 ...

  8. 树莓派3B 无显示器，无键盘，无Linux系统，无网线 配置WIFI连接

    #1.基本需求#2.烧写镜像#3.用有线网(网线)连接PC,实现远程操作树莓派#4.接入无线网,通过其它电脑远程控制树莓派#5.使用PC共享的热点Wifi远程控制树莓派 #1.基本需求 树莓派 USB ...

  9. 【全面解禁!真正的Expression Blend实战开发技巧】第三章 从最常用ButtonStyle开始 - TextButton

    原文:[全面解禁!真正的Expression Blend实战开发技巧]第三章 从最常用ButtonStyle开始 - TextButton 在实际项目中,使用blend做的最多的一定是各种自定义But ...

  10. UwpDesktop！WPF也能开发Surface Dial

    原文:UwpDesktop!WPF也能开发Surface Dial 前段时间巨硬发布了一款新的输入设备Surface Dial,配合Surface Studio使用简直炫酷到没朋友. 本人由于公司业务 ...