`

美化alert

 
阅读更多
    <input type="button" value="点击这里" onclick="alert2('测试效果');" />

function alert2(str) {
    var msgw,msgh,bordercolor;
    msgw = 400;//提示窗口的宽度
    msgh = 100;//提示窗口的高度
    titleheight = 25 //提示窗口标题高度
    bordercolor = "#336699";//提示窗口的边框颜色
    titlecolor = "#99CCFF";//提示窗口的标题颜色

    var sWidth,sHeight;
    sWidth = document.body.offsetWidth;
    sHeight = screen.height;
    var bgObj = document.createElement("div");
    bgObj.setAttribute('id', 'bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.top = "0";
    bgObj.style.background = "#777";
    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity = "0.6";
    bgObj.style.left = "0";
    bgObj.style.width = sWidth + "px";
    bgObj.style.height = sHeight + "px";
    bgObj.style.zIndex = "10000";
    document.body.appendChild(bgObj);

    var msgObj = document.createElement("div")
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background = "white";
    msgObj.style.border = "1px solid " + bordercolor;
    msgObj.style.position = "absolute";
    msgObj.style.left = "50%";
    msgObj.style.top = "50%";
    msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
    msgObj.style.marginLeft = "-225px";
    msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
    msgObj.style.width = msgw + "px";
    msgObj.style.height = msgh + "px";
    msgObj.style.textAlign = "center";
    msgObj.style.lineHeight = "25px";
    msgObj.style.zIndex = "10001";

    var title = document.createElement("h4");
    title.setAttribute("id", "msgTitle");
    title.setAttribute("align", "right");
    title.style.margin = "0";
    title.style.padding = "3px";
    title.style.background = bordercolor;
    title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
    title.style.opacity = "0.75";
    title.style.border = "1px solid " + bordercolor;
    title.style.height = "18px";
    title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
    title.style.color = "white";
    title.style.cursor = "pointer";
    title.innerHTML = "关闭";
    title.onclick = function() {
        document.body.removeChild(bgObj);
        document.getElementById("msgDiv").removeChild(title);
        document.body.removeChild(msgObj);
    }
    document.body.appendChild(msgObj);
    document.getElementById("msgDiv").appendChild(title);
    var txt = document.createElement("p");
    txt.style.margin = "1em 0"
    txt.setAttribute("id", "msgTxt");
    txt.innerHTML = str;
    document.getElementById("msgDiv").appendChild(txt);
}



  • 大小: 2.7 KB
分享到:
评论

相关推荐

    JS提示框美化 alert confirm wait 美化

    为了美化`alert`和`confirm`对话框,开发者可以使用自定义的模态框(modal)或者通知组件(notifier)。这些组件可以通过CSS进行样式定制,实现更丰富的视觉效果。例如,可以改变背景透明度、字体颜色、按钮样式等,...

    alert和confirm弹出框样式美化

    本教程将介绍如何通过自定义CSS和JavaScript来美化`alert`和`confirm`弹出框,实现更个性化的界面效果,而无需依赖浏览器的默认样式。 首先,我们不再直接使用`window.alert()`和`window.confirm()`方法,而是创建...

    js 精美弹出框 alert

    在JavaScript编程中,"js精美弹出框alert"是指通过自定义的方式,创建美观且功能丰富的弹出警告对话框,以替代系统默认的简单且样式单一的`alert()`函数。通常,开发者会使用CSS和JavaScript库来实现这种效果,以...

    一款精美方便的弹窗alert插件

    在IT行业中,用户界面(UI)的体验是至关重要的,其中弹窗(Alert)作为与用户交互的一种常见方式,它的设计和实现往往直接影响到用户体验。本文将深入探讨一款名为SweetAlert的精美弹窗插件,它以其简洁的API和丰富...

    alert_style.zip_alert样式美化_style

    8. **可访问性**:在美化alert时,不要忽视可访问性标准。确保文字有合适的对比度,键盘导航能够正常工作,并为屏幕阅读器提供适当的标记。 9. **用户体验**:保持alert简洁明了,避免过多的信息干扰用户。同时,...

    博客:《好看的alert弹窗或样式弹窗》文章中所涉及到js和css

    在实际应用中,我们可以结合HTML来构建弹窗的结构,然后用CSS进行美化,最后用JavaScript来赋予它行为。HTML可能包含一个用于弹窗的div元素,以及按钮等交互元素。通过JavaScript,我们可以将这个静态的HTML结构变为...

    美化的alert弹窗

    "美化的alert弹窗"正是为了改善传统JavaScript alert对话框单调乏味的样式,提供更吸引人的视觉效果。Bootstrap,一个著名的前端开发框架,以其丰富的组件和易用性,常被用来增强网页的界面设计。在本案例中,我们...

    JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)

    而"JQuery Alert 弹出框美化(Alert, Confirm, & Prompt Replacements)"是针对浏览器原生的alert、confirm和prompt对话框的一种美化和功能增强方案,旨在提升用户体验并提供更丰富的交互。 原生的JavaScript alert、...

    alert confim美化

    "alert confim美化"就是针对这种情况,通过自定义CSS样式,对这两种对话框进行视觉上的优化,以提供更符合品牌形象、用户体验友好的提示信息。 默认情况下,浏览器提供的alert对话框会显示一条消息和一个确定按钮,...

    jquery输入框美化,充满艺术气息

    CSS(层叠样式表)则是负责输入框美化的核心部分。通过定义各种CSS规则,我们可以改变输入框的外观,包括但不限于边框样式、填充颜色、字体样式、阴影效果等。例如,可以设置一个圆角边框,添加渐变背景,甚至定制...

    美化js系统函数alert,confirm,prompt,并实现lightbox效果

    首先,我们来看如何美化`alert`、`confirm`和`prompt`。这些函数的默认弹窗通常包含一个标题、消息文本和一个或多个按钮。我们可以自定义CSS样式,改变字体、颜色、背景、边框等属性,使弹窗更具设计感。例如,使用...

    jquery弹出美化提示框jqueryAlert

    本文将深入探讨“jquery弹出美化提示框jqueryAlert”这一主题,包括其核心特性、使用方法和实际应用。 jQueryAlert是jQuery的一个扩展插件,专门用于创建美观且高度可定制的提示对话框。与原生JavaScript或jQuery...

    alert和confirm弹出框样式美化2

    "alert和confirm弹出框样式美化2"的主题就是如何通过CSS和JavaScript来定制这两个对话框的外观,提升用户体验。 `alert` 对话框主要用于通知用户,展示一条重要的信息,并且只有一个“确定”按钮。`confirm` 对话框...

    alert和confirm弹出框样式美化.zip

    标题“alert和confirm弹出框样式美化.zip”提示我们这个压缩包包含的是关于如何自定义和美化`alert`和`confirm`弹出框的内容,使它们更加符合网页的整体设计风格。 描述中提到,这个资源可以让我们自定义弹出框的...

    jQuery弹窗(alert,confirm)美化插件.zip

    jQuery弹窗(alert,confirm)美化插件,弹窗的一些样式,这个是很常用的,比如我们开发后台程序,往数据库添加内容,是否成功,这时候可以用这样的弹窗,php中文网推荐下载!

    一款alert,confirm美化插件(内含使用教程)

    这是一个美化版的alert和confirm弹出框插件,适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。 功能可自己拓展,这里只是一个基础版本的插件 ,能够取代系统自带的alert和confirm。

    sweetalert.rar

    SweetAlert是一款非常流行的JavaScript库,专门用于创建美观的警告对话框、提示框和确认框,为传统的浏览器alert对话框提供了一种更为优雅的替代方案。它不仅提供了丰富的自定义选项,还具有高度可配置性和易用性,...

    自定义样式弹框alert和confirm

    在JavaScript编程中,`alert`和`confirm`是两种常见的内置弹框,用于向用户显示信息或获取用户确认。然而,这些内置弹框的样式和功能相对固定,不能满足所有设计需求。为了提供更个性化的用户体验,开发者经常需要...

    alert提示框(多种样式)

    "好例子网_弹框.zip"和"类似凡客诚品的alert,confirm弹出窗样式美化.zip"则可能包含了一些实际项目中的弹框样式示例,特别地,后者可能模仿了知名电商网站凡客诚品的提示框设计。 为了实现这些自定义功能,开发者...

    自定义alert样式

    使用CSS对这个自定义的Alert进行美化,可以设定背景颜色、字体、边框、阴影等,以适应你的设计需求。例如: ```css #custom-alert { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);...

Global site tag (gtag.js) - Google Analytics