JavaScript+DIV制作弹出警告窗口效果

zhou363667565

浏览: 1990175 次
性别:
来自: 深圳

最近访客更多访客>>

cyclonejava

冰~水

yang_50

hh_qq_love_hi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

JavaScript CSS HTML 工作

JavaScript+DIV制作弹出警告窗口效果

昨天没事，用JS+DIV制作弹出警告窗口效果。也涉及到一些CSS技术。下面是效果和源代码。欢迎大家转载。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>心林小屋Java工作室-http://hi.baidu.com/362217990</title>
    <script>
    var win;
    var body;
    var bg;
    window.onload=function(){
       win=document.getElementById("win"); //获取小窗口
       bg=document.getElementById("bg");//获取背景框
    body=document.body;//获取当前body  
     }
    
    function show(){
       document.body.scroll="no"; //隐藏当窗口的滚动条
    bg.style.width=body.clientWidth+"px"; //将背景框的宽度调到最宽
       bg.style.height=body.clientHeight+"px";//将背景框的高度调到最高
      
       win.style.display="block";//将小窗口显示
       bg.style.display="block";//将背景框显示
    }
    
    function hide(){
       document.body.scroll="auto";//当窗口的滚动条自动显示
       win.style.display="none";//将小窗口隐藏
       bg.style.display="none";//将背景框隐藏
    }

    </script>
    <style type="text/css">
    
    #win{
       position:absolute;
       border:1px solid #217AC1; 
       width: 250px;
       height: 120px;
       top:50%;
       left:50%;
    margin: -75px -110px;
       background-color: white;
       display: none;
    }
    
    #bg{
       filter:alpha(opacity=50);
       background-color: #99CCCC ;
       position: absolute;
       top:0px;
       left:0px;
       display: none;
    }
    
    
    </style>
</head>

<body>
   <span id="bg"></span>
    <div id="win">
       <div style="background-color: #EBF4FC;"><span style="color: #519FEE"> 友情提示:</span></div>
       <div align="center"><br><span onclick="hide()">关闭窗口</span></div>
    </div>
    <a onclick="show()" href="#">显示窗口</a>

   <a href="http://hi.baidu.com/362217990">TEST</a>
</body>
</html>

分享到：

Struts2+hibernate+spring配置程序整合下载 | 很有用的HTML+JavaScript代码

2011-04-24 22:59
浏览 3084
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript+DIV制作弹出警告窗口效果

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JavaScript+DIV制作弹出警告窗口效果

评论

发表评论

相关推荐

100个javascript小知识点-经典

javascript读取文件夹下的所有文件

Javascript去除数组中的重复值

Javascript常用的操作

HTML字符实体(Character Entities)和转义字符串(Escape Sequence)

javascript获取点击的文本属性

javascript校验实例三

javascript校验实例二

javascript闭包的实现方式

javascript校验实例一

javascript 文本验证实例。

javascript面向对象知识学习笔记二

javascript 面向对象学习笔记一

HTML中的Flie标签禁止修改路径问题。

iframe中子窗体调用父窗体的方法

JS 敲回车按钮 登陆 支持火狐 和 iE浏览器.

javascript 页面跳转

javascript 操作两个select，左右选择值。

javascript 基础知识

javascript对table的添加，删除行的操作

最近访客更多访客>>

JS 敲回车按钮登陆支持火狐和 iE浏览器.