`
jjklmm
  • 浏览: 57556 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 信息提示框

阅读更多


 

效果参考网站:http://www.miiceic.org.cn/eg/eg7/tsk.html

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌."/>
<meta name="copyright" content="安博教育集团 中程在线北京科技有限公司版权所有"/>
<meta name="subject" content="软件开发企业培训,企业内训,软考培训,android应用开发培训,软件工程培训,嵌入式培训,UI设计培训"/>
<meta name="author" content="安博教育集团安博中程"/>
<style type="text/css">
*{margin:0;padding:0} 
body{ background:#fff;font-size:12px; font-family:Tahoma;}
h2{font-size:14px;color:#023b92;margin:10px 0 5px 10px;}
h2 a:link,h2 a:visited{color:#023b92;text-decoration:none;}
h2 a:hover{color:#023b92;text-decoration:underline;}
#ds2 a{color:#000;text-decoration:underline;}
.notice_top{width:258px;height:10px;background:url(show/notice_top.png) bottom left no-repeat;marign:0;padding:0;}
.notice_body{width:258px;height:60px;background:url(show/notice_body.gif) repeat-y;marign:0;}
.notice_foot{width:258px;height:9px;background:url(show/notice_foot.gif) no-repeat;marign:0;}
.lnbody{width:40px;height:42px;padding:10px;float:left;}
.mnbody{width:172px;height:62px;float:left;font-size:12px;line-height:20px;}
.mnbody a{font-size:12px;text-decoration:underline;color:#000;}
.rnbody{width:16px;height:57px;padding-top:5px;padding-right:5px;padding-left:5px;float:left;}
</style>
</head>
<body>

</body>
</html>
<script type="text/javascript">
function AlertNotice(){
   var msgw,msgh,bordercolor;
   msgw=258;//提示窗口的宽度
   msgh=79;//提示窗口的高度
  
   var msgObj=document.createElement("div")
      msgObj.setAttribute("id","msgDiv");
      msgObj.style.position = "absolute";
      msgObj.style.left = "200px";
      msgObj.style.top = "160px";

      msgObj.style.width = msgw + "px";
      msgObj.style.height =msgh + "px";
      msgObj.style.zIndex = "10001";
  
     var ntitle=document.createElement("div");
     ntitle.setAttribute("id","msgTitle");
     ntitle.className="notice_top";

                           
     nbody = document.createElement("div");
     nbody.setAttribute("id","msgBody");
     nbody.className="notice_body";
     
     nfoot = document.createElement("div");
     nfoot.setAttribute("id","msgFoot");
     nfoot.className="notice_foot";
     
     lnbody = document.createElement("div");
     lnbody.setAttribute("id","lnbody");
     lnbody.className="lnbody";
     lnbody.innerHTML="<img src='show/notice.gif' width=40 height=41>";
     
     mnbody = document.createElement("div");
     mnbody.setAttribute("id","mnbody");
     mnbody.className="mnbody";
     mnbody.innerHTML="<strong>企业培训</strong>:<a href='http://www.miiceic.org.cn/'>安博教育中程在线</a><br />企业培训,企业内训,android培训,软考培训,it企业培训";   
     
     rnbody = document.createElement("div");
     rnbody.setAttribute("id","rnbody");
     rnbody.className="rnbody";
     rnbody.innerHTML="<img src='show/notice_close.gif' width=16 height=16>";   
     rnbody.onclick=function(){
                        document.getElementById("msgDiv").removeChild(ntitle);
                        document.getElementById("msgDiv").removeChild(nbody);
                        document.getElementById("msgDiv").removeChild(nfoot);
                        document.body.removeChild(msgObj);
                      }
     
     document.body.appendChild(msgObj);
     
     document.getElementById("msgDiv").appendChild(ntitle);
     document.getElementById("msgDiv").appendChild(nbody);
     document.getElementById("msgDiv").appendChild(nfoot);
     
     document.getElementById("msgBody").appendChild(lnbody);
     document.getElementById("msgBody").appendChild(mnbody);
     document.getElementById("msgBody").appendChild(rnbody);
}
AlertNotice();
</script>

 

效果参考网站:http://www.miiceic.org.cn/eg/eg7/tsk.html

  • 大小: 9.4 KB
0
1
分享到:
评论

相关推荐

    javascript智能提示框小例子

    在这个"javascript智能提示框小例子"中,我们将会探讨如何使用JavaScript创建自定义的提示框,以提供比浏览器默认警告、确认和信息对话框更高级的功能和样式。 在传统的Web开发中,JavaScript内置的`alert()`, `...

    javascript透明信息提示框

    ### JavaScript 实现透明信息提示框(Tooltip)技术详解 #### 一、引言 在现代网页设计中,信息提示框(Tooltip)作为一种重要的交互元素,能够有效提升用户体验。特别是那些带有透明效果的信息提示框,更是增加了...

    鼠标放上去触发一个javascript提示框效果代码

    鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示框效果代码鼠标放上去触发一个javascript提示...

    javascript消息提示框(仿QQ,可自定义修改)

    JavaScript消息提示框是一种常见的用户交互元素,用于向用户显示通知、警告或确认信息。在网页开发中,JavaScript作为客户端脚本语言,提供了丰富的功能来创建动态和交互式的用户体验。本项目是一个完全仿照QQ设计的...

    javascript实现的圆角提示框

    在JavaScript和CSS技术的支持下,我们可以创建一个具有圆角的提示框,这通常被称为"tooltip"。这个提示框不仅能够显示必要的信息,还能通过自定义样式来增强用户体验。以下是对这个话题的详细解释: 首先,我们需要...

    javascript 半透明提示框 简单实用

    在网页设计中,提示框(也称为模态窗口或对话框)是常见的功能,用于向用户显示信息、警告或者请求用户输入。在本教程中,我们将深入探讨如何使用JavaScript实现一个半透明提示框,同时解决浏览器的兼容性问题,特别...

    仿Vista的各种Javascript消息提示框

    `alert()` 是JavaScript中最常见的消息提示框,它会弹出一个带有信息的单按钮对话框,用户只能点击“确定”关闭。例如: ```javascript alert('这是一个简单的警告消息'); ``` 在仿Vista样式中,你可以通过CSS...

    javascript仿163邮箱的提示框

    在JavaScript编程中,创建自定义提示框是一种常见的需求,它能提供更为个性化的用户体验,而“javascript仿163邮箱的提示框”就是一个这样的实践案例。这个项目旨在模仿163邮箱中的提示框效果,利用HTML、CSS和...

    arcgis api for js 自定义弹出信息提示框

    总之,通过深入理解ArcGIS API for JavaScript 和CSS,我们可以创建出符合项目需求的个性化弹出信息提示框,提升地图应用的交互性和视觉效果。这个过程中,良好的代码组织和文档记录也非常重要,以便于后期的维护和...

    JS+css实现仿QQ空间信息提示框

    在JavaScript和CSS的世界里,创建一个仿QQ空间信息提示框是一项常见的前端开发任务。QQ空间信息提示框的设计通常包括动态效果、自定义样式以及交互功能,使得用户在使用时能够获得更加直观和友好的体验。下面我们将...

    javascript 右下角弹出提示框

    利用javascript实现右下角弹出提示框。仿QQ

    qml自定义信息提示框

    在QML(Qt Quick)中,自定义信息提示框是一种常见的需求,特别是在开发用户界面时。QML提供了一种灵活的方式来构建动态且响应式的UI,而自定义消息提示框可以帮助我们实现更加个性化和功能丰富的用户体验。 首先,...

    自定义JavaScript弹出框组件

    自定义JavaScript弹出框组件广泛应用于各种场景,如消息提示、用户确认操作、表单验证错误显示、图片预览等。通过灵活地调整组件的配置,可以轻松地适应不同的UI设计和功能需求。 总结,自定义JavaScript弹出框组件...

    几个非常精美的 JavaScript 消息提示框插件

    网页中的提示框在用户交互过程中扮演着非常重要的角色,消息提示框分为警告消息...今天要介绍的这款JavaScript消息提示框的功能非常强大,我们可以通过配置非常轻松的实现各种消息提示框,而且消息框的皮肤也比较漂亮。

    web端信息提示框

    在前端开发中,用户界面的交互体验至关重要,而信息提示框是用户与系统进行交流的重要方式之一。"web端信息提示框"是一个自定义的前端组件,它允许开发者根据项目需求自由配置提示框的外观和功能,以提供更加个性化...

    javascript制作漂亮的替代alert的提示框

    ### JavaScript 制作漂亮替代 alert 的提示框:深入解析与扩展 #### 核心知识点:JavaScript DOM 操作、CSS 样式控制、事件监听 在前端开发中,`alert()` 函数是最常用的用户消息提示方式之一,但它存在样式单一、...

    javascript弹出带文字信息的提示框效果_.docx

    javascript 弹出带文字信息的提示框效果 javascript 作用域是前端开发必把握的基础学问。在这篇文章中,我们将主要介绍 javascript 中的作用域的相关资料,并分享一个实例,讲解并描述了如何实现javascript 弹出带...

    js提示框制作js文字提示框,js图片提示框

    1. **基本的JavaScript提示框:alert()** JavaScript 提供了 `alert()` 函数,用于弹出一个带有单一按钮的警告对话框,通常用于简单的信息提示。例如: ```javascript alert("这是一条文字提示信息!"); ``` 这...

    html信息提交提示框

    总结来说,创建HTML信息提交提示框涉及HTML结构、CSS样式和JavaScript交互。通过合理的设计和编程,我们可以为用户提供清晰、直观的反馈,增强网站的用户体验。在实际项目中,还可以进一步优化,例如添加动画效果、...

    鼠标移上去显示信息提示框

    "鼠标移上去显示信息提示框"的功能,就是这种体验的一种体现。它允许用户在将鼠标悬停在某个元素上时,出现一个提示框来显示与该元素相关的附加信息。这种设计能够帮助用户快速理解页面元素的具体含义或功能,而无需...

Global site tag (gtag.js) - Google Analytics