[css]实现模态窗口 #3

VaJoy · 2015-12-11T07:22:53Z

假设有一个非常简单的页面，其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}的样式

The text was updated successfully, but these errors were encountered:

f2ebill · 2015-12-11T07:47:56Z

<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 · 2015-12-11T07:50:32Z

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

*{
    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 · 2015-12-11T07:52:15Z

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

tiankongkong224 · 2015-12-11T11:24:10Z

tudousi · 2015-12-14T13:53:36Z

<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 · 2015-12-22T12:43:39Z

#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";
        }

VaJoy added 难度★★ css labels Dec 11, 2015

horsefefe mentioned this issue Jan 13, 2016

高三精读小组课后作业（04期） #16

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css]实现模态窗口 #3

[css]实现模态窗口 #3

VaJoy commented Dec 11, 2015

f2ebill commented Dec 11, 2015

wanglianjie91 commented Dec 11, 2015

VaJoy commented Dec 11, 2015

tiankongkong224 commented Dec 11, 2015

tudousi commented Dec 14, 2015

wait-hua commented Dec 22, 2015

[css]实现模态窗口 #3

[css]实现模态窗口 #3

Comments

VaJoy commented Dec 11, 2015

要求：

f2ebill commented Dec 11, 2015

wanglianjie91 commented Dec 11, 2015

VaJoy commented Dec 11, 2015

tiankongkong224 commented Dec 11, 2015

tudousi commented Dec 14, 2015

wait-hua commented Dec 22, 2015