Stackoverflow answer: modal confirmation box mockup

http://stackoverflow.com/questions/9328223/how-do-i-format-a-string-to-be-multi-line-in-a-javascript-prompt/9329533#9329533

by naveen

HTML

<div id="modalback"></div>

<div id="tester">
lorem ipsum etc.
<button id="activate" data-popupid="confirmpopup">confirm</button>
    &nbsp;<span id="showanswer"></span>
</div>

<div id="Scroller">...</div>

CSS

body {font:normal 0.8em verdana, arial;margin:1em;}

#modalback{
    position:fixed;
    left: 0; right: 0; top: 0; bottom:0;
    background-color: #fff;
    display:none;
}

#tester {
   margin: 5em 0 0 5em;
}

.active{
    display: block !important;
}

.popup{
    background-color: #ffffc0;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 400px;
    min-height: 100px;
    border: 1px solid #999;
    text-align:center;
    display:none;
    position:fixed;
}

.popup p {padding: 12px;}
.popup.active {
    display: block !important;
    z-index: 1000;
    opacity: 1.0 !important;
}

#showanswer {color:red;}

#Scroller {
    position:absolute;
    top: 0;
    height: 1500px;
}

JavaScript

var qs = function(str){
      return document.querySelector(str);
    }
    ,trim = function(s){return s.replace(/^\s+|\s+$/,'');}
;

qs('#activate').onclick = function(){
    var  popid = this.getAttribute('data-popupid')
        ,modal = qs('#'+popid) || createModalBox(popid)
        ,back  = qs('#modalback');
    modalback.className = 'active';
    modal.className += ' active';
    modalback.style.zIndex = 10;
    modalback.style.opacity = 0.7;
    modal.style.position = 'fixed'
   qs('#showanswer').innerHTML = 'waiting for response...';
   return center(modal);
};

function createModalBox(modalid,html){
     var nwBox = document.createElement('div');
     nwBox.id = modalid;
     nwBox.className = 'popup';
     nwBox.innerHTML = html ||
        ['<p>Hi world, just asking:<br />',
         '<b>are you sure?</b></p>',
         '<p><button id="yes">yep</button>',
         '&nbsp;<button id="no">nope</button></p>'].join('');
     (document.body || document.documentElement).appendChild(nwBox);
     qs('#yes').onclick=function(){
         deactivate(function(){qs('#showanswer').innerHTML = 'you clicked yep!';},nwBox);
     }
     qs('#no').onclick=function(){
         deactivate(function(){qs('#showanswer').innerHTML = 'you clicked nope!';},nwBox);
     }
     return nwBox;
}

function deactivate(callback,forpopup){
     var modal = forpopup,
         back  = qs('#modalback');
     modalback.className = '';
     modal.className = trim(modal.className.replace('active',''));
     callback();
     qs('body').style.overflow = '';
}
         
function viewport(){
    var  innerw = window.innerWidth
        ,root   = innerw  ? window : (document.body || document.documentElement)
        ,body   = (document.body || document.documentElement)
        ,which  = innerw ? 'inner' : 'client';
    return {  width : root[ which+'Width' ] 
             ,height : root[ which+'Height' ]
             ,scrollTop: body.scrollTop 
             ,scrollLeft: body.scrollLeft };
}
        ...