billcreswell/Popup.html

## Popup.html
<html>
<head>
<script type="text/javascript">
//<[CDATA[
    window.addEvent('domready', function(){
    // onload functions here
    });

    function overlay() {
        el = document.getElementById("overlay");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }
//]]>
</script>
<style>
/* Props to
   http://blog.raventools.com/create-a-modal-dialog-using-css-and-javascript/
   http://www.bluelemoncode.com/post/2011/05/19/ModalPopup-like-effect-using-simple-Javascript-and-Css.aspx
*/

#overlay div {
     width:100%;
     margin: 5% auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
}

#overlay {
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 10%;
    width:30%;/* 100% for modal*/
    height:40%;/* 100% for modal*/
    overflow:auto;
    text-align:center;
    z-index: 1000;
    background:#2E2E2E; z-index: 1000; filter: alpha(opacity=95);opacity: 0.95;
    padding:25px;color: #fff;
    border-radius: 10px;
    transition:visibility 0s ease .25s,opacity .0s ease .25s;
    box-shadow: 1px 1px 3px #000;
}
.oclose {
    background: #606061;
    color: #fff;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 10px;
    text-decoration: none;
    border-radius: 12px;
    box-shadow: 1px 1px 3px #000;
}

.oclose:hover { background: #ccc; }

</style>
</head>

<body>
<div id="content">

    <h1 class="pagetitle"><a href="/Xrefr/">Xrefr</a> ${pagetitle}
        <button title="help" class="ohelp" onclick='overlay()'>about</button>
    </h1>


     <div id="overlay">
        <button class="fr oclose" onclick='overlay()'>close</button>
        <div class="atl">
              <h1>Quantity Breaks</h1>
              <p><label>Search</label>: Type in a vendor/vendor part code to see current breaks</p>
              <p><label>Add/Update</label>: Type in a vendor/vendor part code, min quanity and price</p>
              <p><label>Hint</label>: Xrefr Matches looks for a match in the xrefr, and displays a
              serial number and link. If it has no matches, it's not likely valid break</p>

         </div>
    </div>

</div>
</body>
</html>