首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

怎的弹出上传页面

2014-01-21 
怎样弹出上传页面?这种效果是怎么做出来的?我很菜,谁能给个现成的代码?谢谢![解决办法]!DOCTYPE HTML PUB

怎样弹出上传页面?

这种效果是怎么做出来的?我很菜,谁能给个现成的代码?谢谢!
[解决办法]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sss</title>
    <style type="text/css">
        html,body{margin: 0;padding: 0;height: 100%}
        body{text-align: center;}
        #mode{
            width: 100%;
            height: 100%;
            left: 0;top: 0;
            position: absolute;
            background-color: #000;
            opacity: 0.4;
            filter:alpha(opacity=40);
            display: none
        }
        #div{
            left: 50%;
            top:50%;
            margin:-150px -200px;
            position: absolute;
            z-index: 2;
            background-color: #fff;
            height: 300px;width: 400px;
            display: none
        }
    </style>
</head>
<body>
一看就是不是搞前端的,只是简单的CSS透明。
<button type="button" onclick="fun()">弹出窗口</button>
<div id="mode"></div>
<div id="div">
    <iframe src="http://www.baidu.com" scrolling="no" frameborder="0" width="100%" height="100%"></iframe>
</div>
<script type="text/javascript">
function fun(){
    document.getElementById("mode").style.display="block";
    document.getElementById("div").style.display="block";
}
</script>
</body>
</html>

热点排行