felayman——显示遮罩

最新推荐文章于 2024-07-25 09:24:40 发布

iteye_20659

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量101

点赞数

文章标签： javascript ViewUI

<!DOCTYPE html>
<html>
<head>
    <title>遮罩函数</title>
    <meta charset="UTF-8"/>
    <style type="text/css">
        #zhezhao{
            width: 100%;
            height: 100%;
            background: gray;
            display:none;
            position: absolute;
            left: 0;
            top: 0;
        }
        #contains{
            width: 520px;
            height: auto;
            background: #fff;
            display: none;
            position: absolute;
            left: 400px;
            top: 70px;
        }
    </style>
    <script type="text/javascript">
        function show(){
            document.getElementById("zhezhao").style.display="block";
            document.getElementById("contains").style.display="";
            document.getElementById("zhezhao").style.filter="Alpha(Opacity=50)";
        }
        function hide(){
            document.getElementById("zhezhao").style.display="none";
            document.getElementById("contains").style.display="none";
        }
    </script>
</head>
<body>
    <input type="button" value="显示遮罩" οnclick="show()"/>
    <div id="zhezhao">
        <form>
            <p><label>请输入用户名:</label><input type="text" name="name"/></p>
            <p><label>请输入密码:<input type="password"name="pwd"/></label></p>
            <input type="button" value="隐藏遮罩" οnclick="hide()"/>
        </form>
    </div>
    <div id="contains">

    </div>
</body>
</html>

iteye_20659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
felayman——显示遮罩

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;遮罩函数&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;style type="text/css"&gt; #zhezhao{
复制链接

扫一扫