实例练习——js在本页面弹出新的div-优快云博客

完整代码：

html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实力练习</title>
    <link href="css.css" rel="stylesheet">
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
<p>可以根据自己要求修改css样式<a href="javascript:void(0)" οnclick="show()">点击这里打开窗口</a></p>
<div id="light" class="white_content">
    This is the lightbox content.
    <a href="javascript:void(0)" οnclick="guanbi()">
        Close</a></div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>

css代码:

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;  left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

js代码：

function show() {
    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';
}

function  guanbi() {

    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';
}

　　代码来源：https://blog.youkuaiyun.com/fishineye/article/details/39011659

过几天把效果图贴上来。。。

转载于:https://www.cnblogs.com/wwHww/p/9050038.html