帶一個元素的CSS模式

Question

我有純CSS的模式窗口。我用這2個div。

問題：我該如何將此重構爲使用ONE 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>