改善用户体验之Alert提示效果

功能:替换传统弹出窗口提示 window.alert("");

好处:界面美观,友善(最起码没有系统报警的声音)。
   引用方便,纯js脚本文件实现所有效果。

使用方法:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
    <head>
        <title>Alert提示效果脚本</title>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta http-equiv="Content-Language" content="gb2312" />
        <meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" />
        <meta name="description" content="电力工程造价信息" />
        <script type="text/javascript" src="alert.js"></script>
        <style type="text/css">
            *{}{
                margin:0;padding:0;
            }
        </style>
    </head>
    <body>
    

    <div class="cecmbody" id="cecmpolicy">
        <div class="leftClass">
            <p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p>
            <input type="button" value="点击这里" οnclick="sAlert('测试效果');" />
            <p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p>
            <p>测试</p><p>测试</p><p>测试</p>
        </div>
        <div class="rightClass">
        </div>    
    </div>
    </body>
</html>
脚本文件alert.js

            /**//*
            作者:Daviv
            博客:http://blog.163.com/jxdawei
            时间:2006-10-27
            感谢:wenming (Blueidea)
            
            功能:弹出提示
            方法:调用sAlert("您要弹出的信息");            
            
            */
            
            function sAlert(str){

            var msgw,msgh,bordercolor;
            msgw=400;//提示窗口的宽度
            msgh=100;//提示窗口的高度
            titleheight=25 //提示窗口标题高度
            bordercolor="#336699";//提示窗口的边框颜色
            titlecolor="#99CCFF";//提示窗口的标题颜色
            
            var sWidth,sHeight;
            sWidth=document.body.offsetWidth;
            sHeight=document.body.offsetHeight;
            if (sHeight<screen.height)
            {
                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 = (msgh-titleheight) + "px";
            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.οnclick=function(){
                document.body.removeChild(bgObj);
                document.getElementById("msgDiv").removeChild(title);
                document.body.removeChild(msgObj);
                }
            document.body.style.overflow = "hidden";
           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);
            }



转载于:https://www.cnblogs.com/Bany/archive/2006/12/01/1755510.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/263228.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode—<动态规划专项>剑指 Offer 42、46、47、48

剑指 Offer 42. 连续子数组的最大和、剑指 Offer 46. 把数字翻译成字符串、剑指 Offer 47. 礼物的最大价值、剑指 Offer 48. 最长不含重复字符的子字符串 题目描述&#xff1a; [42] [46] [47] [48] 考察重点&#xff1a;第42题要计算最大子数组和&#xff0c;考虑第i位…

常用JQuery插件整理

虽然自己也写过插件&#xff0c;但JQuery插件种类的繁多&#xff0c;大多时候&#xff0c;我还是使用别人写好的插件&#xff0c;这些都是我用了同类插件里较为不错的一些&#xff0c;今天就整理一下公开放出来。 UI&#xff1a; jquery.HooRay&#xff08;哈哈&#xff0c;自己…

操作系统核心原理-5.内存管理(下):段式内存管理

一、分页系统的缺点 分页系统存在的一个无法容忍&#xff0c;同时也是分页系统无法解决的一个缺点就是&#xff1a;一个进程只能占有一个虚拟地址空间。在此种限制下&#xff0c;一个程序的大小至多只能和虚拟空间一样大&#xff0c;其所有内容都必须从这个共同的虚拟空间内分配…

局域网连接SQL Server数据库配置

首先要保证两台机器位于同一局域网内&#xff0c;然后打开配置工具→SQL Server配置管理器进行配置。将MSSQLSERVER的协议的TCP/IP的&#xff08;IP1。IP2&#xff09;TCPport改为1433&#xff0c;已启用改为是。 server名称:输入IP 登录名:输入数据库帐号 password:输入数据库…

驳AXAJ的七宗罪 (转)

我不带任何主观色彩来评一下这个所谓的 “AJAX 的七宗罪”。 1、连带着 Flash 和 Ajax 一块骂了。 引用:没有链接的web就像森林中迷路的羔羊&#xff0c;这句看似广告语&#xff0c;其实是web设计的根本原则。 这句“原则”至少我并不知道&#xff0c;因此看起来不过就是一句…

LeetCode—<双指针专项>剑指 Offer 18、21、22、25、52、57、58 - I

剑指 Offer 18. 删除链表的节点、21. 调整数组顺序使奇数位于偶数前面、22. 链表中倒数第k个节点、25. 合并两个排序的链表、52. 两个链表的第一个公共节点、57. 和为s的两个数字、58 - I. 翻转单词顺序 题目描述&#xff1a; [18] 给定单向链表的头指针和一个要删除的节点的值…

Android应用程序绑定服务(bindService)的过程源代码分析

Android应用程序组件Service与Activity一样&#xff0c;既可以在新的进程中启动&#xff0c;也可以在应用程序进程内部启动&#xff1b;前面我们已经分析了在新的进程中启动Service的过程&#xff0c;本文将要介绍在应用程序内部绑定Service的过程&#xff0c;这是一种在应用程…

递归-汉诺塔

#A&#xff1a;起始&#xff0c;B&#xff1a;中间&#xff0c;C&#xff1a;最后count0def hanoi(n,A,B,C): global count if n1: print("{}:{}->{}".format(1,A,C)) count1 else: hanoi(n-1,A,C,B) #将前n…

Bootstrap系列 -- 8. 代码显示

一. Bootstrap中的代码块 代码块一般在博客中使用的较多&#xff0c;比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示 1. 使用<code></code>来显示单行内联代码 2. 使用<pre></pre>来显示多行块代码 3. 使用<kbd></kbd>…

PowerDesigner12对SQL2005反向工程问题.

用PowerDesigner12利用ODBC连接SQL2005进行反向工程&#xff0c;总分报错[Microsoft][ODBC SQL Server Driver][SQL Server]未能准备评语句SQLSTATE37000解决办法&#xff1a;把&#xff02;更改默认的数据库为&#xff02;这个选项去掉在中选择要进行操做的数据库.转载于:http…

LeetCode—<搜索与回溯专项>剑指 Offer 12、13、34、36、54

剑指 Offer 12. 矩阵中的路径、13. 机器人的运动范围、34. 二叉树中和为某一值的路径、36. 二叉搜索树与双向链表、54. 二叉搜索树的第k大节点 题目描述&#xff1a; [12] 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中&#xff0c;返回…

导数--基本概念

转载于:https://www.cnblogs.com/liuys635/p/11242741.html

解决IE6、IE7、Firefox兼容最简单的CSS Hack

写三句代码来控制一个属性&#xff0c;区别Firefox&#xff0c;IE7&#xff0c;IE6&#xff1a; background:orange; *background:green !important; *background:blue; 说明&#xff1a;这段代码会使在Firefox中&#xff0c;背景呈橙色&#xff1b;IE7中为绿色&#xf…

[导入]创建、查询、修改带名称空间的 XML 文件的例子

XML的应用越来越广泛了&#xff0c;如Vista、Flex编程都将使用 XML&#xff0c;正确掌握XML的各种操作&#xff0c;对提高编程效率至关重要。下面就是一个综合处理带名称空间的XML的例子。 文章来源:http://blog.csdn.net/net_lover/archive/2006/12/18/1447434.aspx 转载于:ht…

Kernel那些事儿之内存管理(2) --- 百闻不如一见

上次介绍了物理内存管理中三位主要人物中的node 和zone。这两位是当官的&#xff0c;一个是县长&#xff0c;一个是里长&#xff0c;不敢不先介绍啊。接下来出场的就是我们的老百姓了 --- page frame。Page frame是物理内存的基本组成单位&#xff0c;在Kernel中由结构体 struc…

LeetCode—<排序专项>剑指 Offer 40、41、45、61

剑指 Offer 40. 最小的k个数、41. 数据流中的中位数、45. 把数组排成最小的数、61. 扑克牌中的顺子 题目描述&#xff1a; [40] 输入整数数组 arr &#xff0c;找出其中最小的 k 个数。例如&#xff0c;输入4、5、1、6、2、7、3、8这8个数字&#xff0c;则最小的4个数字是1、2…

归并 快排 快速幂

/* 归并排序&#xff1a;不断将数组切分为两部分递归切分直到数组长度为1&#xff0c;之后逐渐有序合并 */ #include <cstdio> #include <iostream> #include <cmath> using namespace std;//归并 小-->大 void Merge(int a[], int s, int m, int e, int …

dev GridControl双击行事件

今天用到了gridcontrol这个控件,要求写一个gridview的双击事件,因为想要的效果是只双击行才出Message,用gridview的Double_Click我没实现,后来想到MouseDown,一试,很简单,首先,仍旧需要将gridview1.OptionsBehavior.Editable设为false,下面是代码: Skelta BPM.NET&#xff08…

自己动手编写一个ajax extender

该扩展的功能有以下几点&#xff1a;1、当鼠标移到某个按钮上时&#xff0c;该按钮显示一个Css样式&#xff1b;2、当鼠标移开该按钮时&#xff0c;该按钮显示另外一个Css样式&#xff1b;3、当鼠标点击该按钮时&#xff0c;执行一个用户自己定义的javascript函数&#xff1b; …

jQuery:表格的奇偶行变色,jquery实例之表格隔一行

jQuery:表格的奇偶行变色<html> <head> <title>表格变色</title> <style type"text/css"> .odd{background:#ffffee;} .even{background:#fff38f;} .first{background:red;} .last{background:blue;}…