[css]实现模态窗口

VaJoy commented 8 years ago

假设有一个非常简单的页面，其DOM结构如下：

<body>
  <button id="btn">点我出来模态窗口哦</button>
  <div id="md-bg" style="display: none">
    <p id="md-window">我是一个窗口内容</p>
    <a id="md-close">X</a>
  </div>
</body>

请你在不改变DOM结构（不删除或新增节点）的前提下编写对应的样式和脚本，让用户点击<button>时可以弹出一个简单的模态窗口，点击<a>时则关闭模态窗口。其中关于模态窗口样式要求如下图：其中 div 的底色为黑色半透明（如果浏览器支持透明的话），<a>的底色为 darkred。交互效果如下：

要求：

兼容到IE8+（其中div的透明度允许优雅降级）；
不新增、删除原有DOM节点；
<a>里的“X”要求字号为14px，字体为“Arial”，必须居中显示；
可以自行添加class、<style>、<script>；
代码越少越好
无需考虑多余的需求（之前的题目有的童鞋总会考虑太多，写一些需求外的东西），比如不要自作主张给<a>加上a:hover{cursor: pointer}的样式

f2ebill commented 8 years ago

<script>
    var oOepn = document.getElementById('btn'),
        oBg = document.getElementById('md-bg'),
        oClose = document.getElementById('md-close');
    oOepn.onclick = function(){
        oBg.style.display = 'block';
    }

    oClose.onclick = function(){
        oBg.style.display = 'none';
    }
</script>

wanglianjie91 commented 8 years ago

坐等昨天作业的最优解，已经想了两天了，没头绪。

*{
    margin:0;
    padding:0;
}
html,body{
    width:100%;
    height:100%;
}
#md-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
}
#md-window{
    width:300px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-150px;
    background:#fff;
}
#md-close{
    display:block;
    width:30px;
    height:30px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-165px;
    margin-left:135px;
    color:#fff;
    background:darkred;
    font-size:14px;
    font-family:"Arial";
    line-height:30px;
    text-align:center;
}

window.onload = function(){
    var $ = function(id){
        return document.getElementById(id);
    }
    $("md-close").onclick = function(){
        $("md-bg").style.display = "none";
    }
    $("btn").onclick = function(){
        $("md-bg").style.display = "block";
    }
}

VaJoy commented 8 years ago

大家多擅用 markdown来写答案...
不懂怎么用的到这里参考

tiankongkong224 commented 8 years ago

tudousi commented 8 years ago

<button id="btn">点我出来模态窗口哦</button>
<div id="md-bg" style="display:none;">
    <p id="md-window">我是一个窗口内容</p>
    <a id="md-close">X</a>
</div>

var btn = document.getElementById('btn');
var dialog = document.getElementById('md-bg');
var close = document.getElementById('md-close');
var closeFunc = (function(){
    var flag = false;
    return function() {
        flag = !flag;
        alert(flag)
        if(flag) {
            dialog.style.display = "block";
        } else {
            dialog.style.display = "none";  
        }

    }
})();
close.onclick = closeFunc;
btn.onclick = closeFunc;

wait-hua commented 8 years ago

#md-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: rgba(0,0,0,.5);
}
#md-window {
    width: 300px;
    height: 300px;
    position: absolute;
    top:50%;
    left: 50%;
    background-color: #fff;
    margin-left: -150px;
    margin-top: -150px;
}
#md-close {
    position: absolute;
    width: 30px;
    height: 30px;
    left:50%;
    top:50%;
    margin-left: 135px;
    margin-top: -160px;     
    background-color: darkred;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    font-family: "Arial";
    color: #fff; 
}

               var btn = document.getElementById("btn");
        var popwin = document.getElementById("md-bg");
        var close = document.getElementById("md-close");
        btn.onclick = function() {
            popwin.style.display = "block";
        };
        close.onclick = function() {
            popwin.style.display = "none";
        }

N-ZOO / everycode

[css]实现模态窗口 #3

要求：