Fadein Popup Message

by Joe Saad

HTML

<a href="#">click me</a>

<div id="poped"><p>Rhoncus elementum tincidunt dictumst amet sed cum diam, scelerisque turpis? Odio mus odio parturient aenean, amet! Augue, magna. Augue urna dictumst in natoque in dapibus, amet a massa. Ac et? Enim sit, ultricies ut pulvinar magnis ultrices augue elementum risus, nisi aenean, nec nunc, proin magna cras etiam, hac, eros dictumst, enim, nunc ultricies hac, aliquam vel nunc rhoncus dictumst lorem! Dis sociis mid sagittis placerat, purus magnis.</p><p> Dapibus facilisis eros lacus, et porttitor nunc lundium, elit et nisi facilisis nec montes, ridiculus in platea, turpis augue rhoncus natoque habitasse adipiscing ac? Auctor pulvinar ut, urna nec nisi nec! Sociis. Tortor scelerisque non enim phasellus turpis augue lundium? Sed turpis? Cursus tincidunt in pellentesque pid parturient turpis vel risus porttitor.</p></div>
<div>, nisi aenean, nec nunc, proin magna cras etiam, hac, eros dictumst, enim, nunc ultricies hac, aliquam vel nunc rhoncus dictumst lorem! Dis sociis mid sagittis placerat, purus magnis.</p><p> Dapibus facilisis eros lacus, et porttitor nunc lundium, elit et nisi facilisis nec montes, ridiculus in platea, turpis augue rhoncus natoque habitasse adipiscing ac? Auctor pulvinar ut, urna nec nisi nec! Sociis. Tortor scelerisque non enim phasellus turpis augue lundium? Sed turpis? Cursus tincidunt in pellentesque pid parturient turpis vel risus porttitor., nisi aenean, nec nunc, proin magna cras etiam, hac, eros dictumst, enim, nunc ultricies hac, aliquam vel nunc rhoncus dictumst lorem! Dis sociis mid sagittis placerat, purus magnis.</p><p> Dapibus facilisis eros lacus, et porttitor nunc lundium, elit et nisi facilisis nec montes, ridiculus in platea, turpis augue rhoncus natoque habitasse adipiscing ac? Auctor pulvinar ut, urna nec nisi nec! Sociis. Tortor scelerisque non enim phasellus turpis augue lundium? Sed turpis? Cursus tincidunt in pellentesque pid parturient turpis vel risus porttitor.</div>
    <div...

CSS

div#poped {display:none; width:300px; height:auto; position:absolute; border:1px solid magenta; background-color:black; padding:30px; z-index:3; top:10%; left:10%;  }
p {background-color:white; padding:10px;}
div#faded {display:none;position:fixed; width:100%; height:100%; background-color:#000; opacity:0.7; filter:alpha(opacity=70); border:1px solid blue;top:0; left:0; z-index:2;}

JavaScript

$(function(){
    $('a').click(function(){
        $('#poped, #faded ').fadeIn();
    });
    $('#faded').click(function(){
        $('#poped, #faded ').hide();
    });
});

$(document).keyup(function(e) {
  //if (e.keyCode == 13) { $('.save').click(); }     // enter
  if (e.keyCode == 27) { $('#poped, #faded ').hide();  }   // esc
});