shopify analytics ecommerce

A better popup

I found a better alert/popup, I think I stumbled on an internal frame or something. The important thing is that it works better and it's easier to customize. So here is the page-specific CSS for the lexicon.

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;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;

.modalDialog:target {
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;}

Here's the revised code for the letter box.

<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>
               <A class="nwc" HREF="#acknowledge-but-not-celebrate">acknowledge but not celebrate</a>
               <A class="nwc" HREF="#active">active</a>
               <A class="nwc" HREF="#auto-didacticism">auto didacticism</a>
               <A class="nwc" HREF="#"></a>

I insert this line in the bottom of the definition blockquote.

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

Finally this goes under the definition blockquote.

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

And that is all there is to it. I'm pretty happy with the way it looks and behaves.
blog comments powered by Disqus