javascript - 具有一个元素的 CSS 模态

Question

我有纯 CSS 模态窗口。我用于这 2 个 div。

问题:我如何重构它以使用一个 div 代替？

需要的用途:

<div class="modal">
    some text

    <a href="">x</a>
</div>

当前代码:

JSFiddle: http://jsfiddle.net/uogoxj8d/

.modal:before {
    content: "";
    position: fixed;
    background-color: rgba(0,0,0,0.8);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.modal-content {
    position: fixed;
    background-color: #FFFFFF;
    border: 1px #000000 solid;
    padding: 10px;
    width: 70%;
    max-width: 400px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.modal-content a {
  position: absolute;
  top: 0;
  right: 10px;
}

<div class="modal">
    
    <div class="modal-content">
        some text
      
        <a href="">x</a>
    </div>
    
</div>

Answer 1

哦，我明白了。只需使用一个巨大的盒子阴影。这样行吗？

.modal-content {
    position: fixed;
    background-color: #FFFFFF;
    border: 1px #000000 solid;
    padding: 10px;
    width: 70%;
    max-width: 400px;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow:0 0 0 9999px rgba(0,0,0,0.75);
}

    
    <div class="modal-content">
        some text
        <a href="">close</a>
    </div>