a.letter:link, a.letter:visited {color: #0A4F00;}
a.letter:hover {color: #a33d00; background-color: transparent; font-size: 113%;}


.modalDialog {
position: fixed;
text-transform: uppercase;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

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


.modalDialog > div {
width: 550px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #ffffff;

}


.close {
background: #C0C0C0;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}

.close:hover {background: #0A4F00; color: white; }

.contentPlus {margin: 1em; line-height: 2em; max-height: 35em; overflow: scroll;}

<h1 id="Aa" class="alpha"><a class="letter" HREF="#Aa-box">Aa…</a></h1>
     <div id="Aa-box" class="modalDialog">
          <div style="width: 900px;">
          <div style="text-align: right;"><a class="close" href="#Aa"> ✓ </a></div>
          <div class="contentPlus">
               <A class="nwc" HREF="#ace-factor">ace factor</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <A class="nwc" HREF="#acknowledge-but-not-celebrate">acknowledge but not celebrate</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <A class="nwc" HREF="#active">active</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <A class="nwc" HREF="#auto-didacticism">auto didacticism</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
               <A class="nwc" HREF="#"></a>
          </div>
     </div>
</div>

<div style="text-align: right;"> <a class="letter" href="#ace-factor-info">✧</a></div>

<div id="ace-factor-info" class="modalDialog"><div>
     <a class="close" href="#ace-factor"> ✓ </a>
     <div class="content">The web address for this definition is</p>
     <div style="text-transform: none; text-align: center; font-weight: bold;">www.neowayland.com/lexicon/#ace-factor
     </div></div>
</div>