`
liss
  • 浏览: 842401 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

改善window的alert提示信息框样式

阅读更多

<input type="button" value="点击这里" onclick="sAlert('测试效果<br>还可以直接书写HTML代码 <br>&copy; 2006');" />

<script type="text/javascript" language="javascript">
//Author:Daviv
//Blog:http://blog.163.com/jxdawei
//Date:2006-10-28
//Email:jxdawei@gmail.com
            function sAlert(str){
            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的宽度
            msgh=100;//提示窗口的高度
            bordercolor="#336699";//提示窗口的边框颜色
            titlecolor="#99CCFF";//提示窗口的标题颜色
            
            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=document.body.offsetHeight;
            

            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";
            document.body.appendChild(bgObj);
            var msgObj=document.createElement("div")
            msgObj.setAttribute("id","msgDiv");
            msgObj.setAttribute("align","center");
            msgObj.style.position="absolute";
            msgObj.style.background="white";
            msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.border="1px solid " + bordercolor;
            msgObj.style.width=msgw + "px";
            msgObj.style.height=msgh + "px";
          msgObj.style.top=(document.documentElement.scrollTop + (sHeight-msgh)/2) + "px";
          msgObj.style.left=(sWidth-msgw)/2 + "px";
          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);
      }
</script>

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/dlhzt/archive/2008/09/02/2865277.aspx

分享到:
评论

相关推荐

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

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

    jquery重写window alert 信息提示

    因此,"jQuery重写window alert 信息提示"这个主题就是关于如何使用jQuery和相关库来创建更美观、功能更丰富的自定义提示框。 首先,我们需要理解jQuery的基本用法。jQuery是一个轻量级的JavaScript库,它简化了DOM...

    自定义alert提示框

    在IT行业中,自定义Alert提示框是一个常见的需求,特别是在开发用户界面时,为了提供更加个性化和符合品牌风格的用户体验。通常,系统自带的alert对话框样式单一,难以满足设计和功能上的扩展要求。本篇文章将深入...

    自定义window.alert对话框JS代码

    而“经典弹出对话框”则暗示了这个自定义对话框可能沿用了传统对话框的基本结构,如一个中心显示的提示信息,以及一个或多个操作选项。 在提供的压缩包文件中,有两个主要文件: 1. `main.html`:这是HTML文件,它...

    弹框 遮罩层 alert提示 样式

    在IT行业中,尤其是在前端开发领域,弹框、遮罩层以及alert提示是常见的用户交互元素。这些元素在网页设计中起到关键作用,为用户提供信息反馈、确认操作等互动体验。本篇文章将深入探讨这些概念,并结合JavaScript...

    alert_style.zip_alert样式美化_style

    6. **JavaScript交互**:在JavaScript中,可以使用`window.alert()`函数来创建弹出框,但它的样式有限。为了实现更复杂的alert,可以创建自定义DOM元素,并通过JavaScript控制其显示和隐藏。 7. **模态对话框**:...

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

    在JavaScript编程中,系统内置...通过自定义样式和JavaScript编程,我们可以创建与网站设计相匹配的提示框,并提供更高级的图片浏览体验。这些技能对于前端开发者来说是非常实用的,也是构建高质量网页应用的关键部分。

    easyUI实现(alert)提示框自动关闭的实例代码

    2. `msg`:提示信息内容,是对话框的主要信息部分,用户会在这里看到具体的提示信息。 3. `icon`:提示信息的图标类型,可以是 'info'、'warning' 或 'error' 等,这些图标可以帮助用户快速理解提示的性质。 函数体...

    js模拟Confirm、alert弹框,可以修改文字颜色。

    可以直接调用,操作方便,调用代码如下: jConfirm('Can you confirm this,&lt;span am red.&lt;/span&gt;?', 'Confirmation Dialog', function(r) { });

    jquery弹出框 提示框实例

    "jQuery弹出框 提示框实例"是关于如何利用jQuery来创建和展示用户交互式提示信息的一个主题。在网页设计中,弹出框和提示框是不可或缺的元素,它们用于警告、确认、询问或者展示详细信息。下面我们将深入探讨这个...

    js弹出div层模拟alert(可以在iframe中使用)

    这个自定义的alert对话框不仅提供了更多的样式定制可能性,而且解决了在iframe中使用时的覆盖问题。你可以根据需要修改CSS样式,以适应不同的应用场景。 总结来说,通过创建自定义的HTML结构和JavaScript控制逻辑,...

    页面设计,网页右下方弹出框,类似QQ,或者CSDN右下角的提示框

    在网页设计中,创建一个类似QQ或CSDN右下角的提示框是常见的功能,主要用于显示消息通知、广告信息或是交互反馈。这种提示框通常称为"气泡通知"或"浮层提示",它不干扰用户的主要操作,又能有效地传递信息。下面将...

    iOS移动端(H5)alert/confirm提示信息去除网址(URL)

    在iOS移动端的HTML5(H5)应用中,开发者可能会遇到一个特定的问题,即在使用`alert`或`confirm`函数进行用户交互时,系统会在提示信息上方显示当前页面的URL地址。这可能会对用户体验造成干扰,特别是对于追求简洁...

    Asp.net后臺程式中Alert信息

    Response.Write("&lt;script&gt;alert('来自后端的提示信息!');&lt;/script&gt;"); } } ``` 在VB.NET中,代码类似: ```vbnet Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load If Not ...

    javascript经典特效---信息框显示链接.rar

    在网页设计中,信息框显示链接是常见的功能之一,它通常用于提示用户或者展示重要的信息。"javascript经典特效---信息框显示链接.rar"这个资源可能包含了一个实现这种效果的实例。 在JavaScript中,创建信息框通常...

    AJAX弹出框_利用ScriptManager.RegisterStartupScript

    - 在网页交互中,经常需要显示提示信息、确认对话框等,这些操作可以通过 JavaScript 的 `alert()`、`confirm()` 等函数实现。 - 但当需要在服务器端进行某些逻辑处理后再显示提示时,直接在客户端写死 JavaScript ...

    网页自动弹出框

    在JavaScript中,我们可以使用`window.alert()`、`window.confirm()`或`window.prompt()`方法来创建弹出框。`alert()`用于显示警告对话框,一般只包含一个“确定”按钮;`confirm()`则会显示一个确认对话框,带有...

    Swift5.2 操作提示框(中间弹出).zip

    let alertController = UIAlertController(title: "提示标题", message: "提示信息", preferredStyle: .alert) ``` 这里,`title`是提示框的标题,`message`是显示给用户的信息,`preferredStyle`参数设为`.alert`...

    easyui messager alert 三秒后自动关闭提示的实例

    在上述给出的代码片段中,我们首先看到了一个 $.messager.alert 函数的调用,这个函数是 EasyUI 框架中的一个方法,用于显示一个提示信息框。$.messager.alert 的参数分别是: 1. 标题,这里传入的是一个空字符串,...

    让alert不出现弹窗的两种方法

    如果需要保持原有功能,比如在用户界面中显示提示信息,可以考虑使用其他替代方案,如自定义模态对话框。 方法二:将重写放入公共JS文件 为了使代码更模块化和易于管理,可以将重写后的`alert()`函数放入一个公共...

Global site tag (gtag.js) - Google Analytics