/*  HTML =    <button class="mehr"><a href="#openModal">mehr...</a></button>   
              <div id="openModal" class="modalDialog">
              <div>
              <a href="#close" title="Schliessen" class="close">X</a>
              <h2>Platz für weiteren Text</h2>
              <h4>Modales Fenster, erstellt in HTML5 und CSS3.</h4>
              <p>Text... Text... Text...</p>
*/

.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 pointer-events: None;
}

.modalDialog:target { opacity:1; pointer-events:Auto;}

.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% Auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background-color: #fff;
 background: linear-gradient(#fff, #999);
 cursor: Default;
}

.close {
 background-color: #666;
 color: #fff;
 line-height: 25px;
 position: Absolute;
 right: -12px;
 text-align: Center;
 top: -10px;
 width: 24px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 12px;
 box-shadow: 1px 1px 3px #000;
}
.close:hover { background-color:#0df; }