`
snoopy7713
  • 浏览: 1146853 次
  • 性别: Icon_minigender_2
  • 来自: 火星郊区
博客专栏
Group-logo
OSGi
浏览量:0
社区版块
存档分类
最新评论

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

阅读更多

轉自:http://bbs.blueidea.com/thread-2688074-1-1.html

<! 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 >
        
< meta  name ="verify-v1"  content ="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8="   />
        
< title >
            政策文件_中国电力工程造价信息网
</ 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 ="电力工程造价信息"   />
        
< 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 >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >< p > 测试 </ p >
            
< input  type ="button"  value ="点击这里"  onclick ="sAlert('测试效果');"   />
        
        
</ div >
        
< div  class ="rightClass" >
        
</ div >     
    
</ div >
                
< script  type ="text/javascript"  language ="javascript" >
// Author:Daviv
//
Blog:http://blog.163.com/jxdawei
//
Date:2006-10-27
//
Email:jxdawei@gmail.com
             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
= 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);
            }
        
</ script >
    
</ body >
</ html >

分享到:
评论

相关推荐

    改善用户体验的alert提示效果

    总结来说,“改善用户体验的alert提示效果”是一个涉及前端开发、UI设计和用户体验优化的综合话题。通过使用jQuery和其他前端工具,我们可以创造出更符合现代网页设计趋势、更具互动性和个性化的提示效果,从而提升...

    用javascript实现改善用户体验之alert提示效果

    ### 使用JavaScript改善用户体验:自定义Alert提示效果 #### 一、引言 在网页开发过程中,弹窗提示是用户交互中不可或缺的一部分。传统的`alert()`函数虽然简单易用,但其样式固定且不可定制,这往往无法满足现代...

    改善用户体验的alert提示效果特效代码

    "改善用户体验的alert提示效果特效代码"这一主题,旨在分享如何利用编程技巧和设计思维,为alert提示注入新鲜感,提高用户的互动体验。这种方法不仅可以让用户更愿意接受信息,还可以使他们对产品留下深刻印象。 ...

    N种改善用户体验的DEMO

    在IT行业中,用户体验(User Experience, UX)是产品设计的核心要素之一,关乎用户与产品的交互质量和满意度。"N种改善用户体验的DEMO"这个主题涵盖了多种优化用户界面和交互方式的技术与方法。以下是对压缩包文件中...

    JQuery Alert Dialog改善后

    "JQuery Alert Dialog"是jQuery的一个扩展,用于增强原生JavaScript中的alert对话框功能,提供更丰富的用户交互体验。传统的alert对话框通常只包含一条文本消息,而jQuery Alert Dialog则可以添加错误、警告、提示等...

    jQuery插件:警告-确认-提示弹出对话框效果_jquery_alert_dialogs

    在网页开发中,交互性是用户体验的关键因素之一。jQuery库为开发者提供了丰富的API,使得创建动态、用户友好的页面变得更加简单。"jQuery插件:警告-确认-提示弹出对话框效果"是一个针对jQuery的扩展,它允许开发者...

    美化的alert弹窗

    总的来说,结合Bootstrap和SweetAlert,开发者可以轻松地为网站或应用创建出美观且交互友好的alert弹窗,提高用户体验,使信息提示不再枯燥无味。这不仅是提升产品形象的一个有效方法,也是现代Web开发中不可或缺的...

    sweetAlert 2.0

    SweetAlert 2.0 是一个现代化的、可自定义...总的来说,SweetAlert 2.0是一个强大的工具,可以极大地改善你的Web应用程序中的提示和用户交互体验。它易于上手,且提供了丰富的自定义选项,是开发中不可或缺的一个组件。

    jquery SweetAlert插件实现响应式提示框

    SweetAlert不仅改善了用户体验,还允许开发者以更简洁、直观的方式展示消息、错误提示、成功提示和自定义提示框。 SweetAlert插件为用户提供了一系列可定制的特性,使其在各种设备上都能够优雅地展现,包括桌面、...

    封装js弹层提示插件

    "封装js弹层提示插件"是开发者为了提高用户体验和代码复用性而创建的一种工具,它通常包括多种类型的通知方式,如Toast、Alert、Confirm以及Loading等。以下是对这些功能的详细解释: 1. **Toast**: Toast是一种...

    JS漂亮特效

    4. **改善用户体验的alert提示效果.htm**:原生的JavaScript alert对话框有时会打断用户的操作流程。这个文件可能介绍了一种自定义的提示效果,通过动态创建DOM元素和添加动画效果,使得提示更加友好且不中断用户...

    jquery ui messager 消息框

    这可能包括添加新的消息类型、改变样式或者改善用户体验。 5. **Ajax**:jQuery UI Messager可能利用Ajax技术来异步加载和更新消息,这样可以实现无刷新页面更新,提高用户体验。 6. **事件处理**:jQuery UI ...

    mu4e-alert:mu4e的桌面通知和Modeline显示

    mu4e-alert的引入旨在改善mu4e的用户体验,通过在用户界面中提供即时反馈。它主要有两个核心功能: 1. **桌面通知**:当有新邮件到达时,mu4e-alert可以在用户的桌面环境(如GNOME、i3wm或macOS等)上显示通知。...

    控件嵌套在ajax的模板中 需要提示的对话框写法

    这种方式极大地改善了用户体验,但同时也带来了新的挑战,特别是在DOM操作、事件处理以及与服务器端交互等方面。 #### 控件嵌套 在Web开发中,控件嵌套是指在一个容器控件(如Panel、UpdatePanel等)内放置其他控件...

    jquery-alert:jquery-警报

    `jQuery-Alert`插件就是为了改善这种情况,它允许开发者通过jQuery轻松地定制警告对话框的样式和功能,为用户提供更加友好且可定制的交互体验。 **一、jQuery-Alert的核心功能** 1. **样式定制**:jQuery-Alert...

    js验证密码输入

    - **使用更安全的提示方式**:使用`alert()`弹出警告虽然简单,但在现代Web开发中,更推荐使用模态对话框或自定义提示框,以提供更好的用户体验和视觉效果。 - **增加密码强度指示器**:在用户输入密码时实时显示...

    移动开发保存数据程序逻辑

    ### 移动开发保存数据程序逻辑 在移动应用开发中,数据保存是一项基本...这不仅能提升应用的整体性能,还能显著改善用户体验。开发者在实际开发过程中,应当结合具体的应用场景和需求,灵活调整和优化相关的逻辑实现。

    javascript经典特效---直接查看硬盘的内容.rar

    4. 弹出框和提示:使用alert、prompt和confirm函数,可以与用户进行交互。 5. 时间和日期处理:通过Date对象,可以进行各种日期和时间的计算和格式化。 6. 动画效果:通过修改元素的CSS属性,如位置、大小、透明度等...

    28个jQuery常用插件.

    28. **SweetAlert**: 优雅的替代alert、confirm和prompt的插件,提供自定义的提示对话框。 这些jQuery插件涵盖了网页开发中的多个方面,从用户交互到数据可视化,再到页面布局优化,都有相应的解决方案。通过合理...

    40种网站设计常用技巧

    这样可以改善用户体验,让用户更便捷地编辑文本。 ### 15. 获取引用页面地址 使用`javascript: document.referrer`可以获取到用户是从哪个页面跳转过来的。这对于分析用户行为或统计来源很有帮助。 ### 16. 控制...

Global site tag (gtag.js) - Google Analytics