Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- <!-- https://craig.is/killing/mice -->
- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
- <title>Lightbox Test</title>
- <style type="text/css">
- body
- {
- font-family: Helvetica, Arial;
- }
- .backdrop
- {
- position:absolute;
- top:0px;
- left:0px;
- width:100%;
- height:100%;
- background:#000;
- opacity: .0;
- filter:alpha(opacity=0);
- z-index:50;
- display:none;
- }
- .box
- {
- position:absolute;
- top:20%;
- left:30%;
- width:500px;
- height:300px;
- background:#ffffff;
- z-index:51;
- padding:10px;
- -webkit-border-radius: 5px;
- -moz-border-radius: 5px;
- border-radius: 5px;
- -moz-box-shadow:0px 0px 5px #444444;
- -webkit-box-shadow:0px 0px 5px #444444;
- box-shadow:0px 0px 5px #444444;
- display:none;
- }
- .close
- {
- float:right;
- margin-right:6px;
- cursor:pointer;
- }
- </style>
- <script type="text/javascript">
- jQuery(document).ready(function(){
- jQuery('.lightbox').click(function() {
- jQuery('textarea#lbcode').val(jQuery('.note').html());
- jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
- jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
- jQuery('.backdrop, .box').css('display', 'block');
- Mousetrap.bind('enter', function() { jQuery('.lightbox-buttons .lightbox_save_close').trigger('click'); });
- Mousetrap.bind('esc', function() { jQuery('.lightbox-buttons .lightbox_close').trigger('click'); });
- });
- jQuery('.lightbox_save_close').click(function(){
- var strTxt = jQuery('textarea#lbcode').val().toString();
- jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
- jQuery('.backdrop, .box').css('display', 'none');
- });
- jQuery('.note').html(strTxt);
- jQuery('textarea#lbcode').val(""); // clean up textarea
- unbind_keys();
- });
- jQuery('.lightbox_close').click(function(){
- jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
- jQuery('.backdrop, .box').css('display', 'none');
- });
- jQuery('textarea#lbcode').val(""); // clean up textarea
- unbind_keys();
- });
- jQuery('.close').click(function(){
- close_box();
- unbind_keys();
- });
- jQuery('.backdrop').click(function(){
- close_box();
- unbind_keys();
- });
- });
- function close_box()
- {
- jQuery('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
- jQuery('.backdrop, .box').css('display', 'none');
- });
- jQuery('textarea#lbcode').val(""); // clean up textarea
- }
- function unbind_keys()
- {
- Mousetrap.unbind('enter');
- Mousetrap.unbind('esc');
- }
- </script>
- </head>
- <body>
- <h1>Lightbox Textarea Example</h1>
- <a href="#" class="lightbox">Open Lightbox</a>
- <div class="note"><p style="color:green;">Hello world</p></div>
- <div class="backdrop"></div>
- <div class="box"><div class="close">x</div>This is the lightbox!!!<div>
- <textarea id="lbcode" rows="8" cols="68"></textarea>
- </div>
- <div class="lightbox-buttons">
- <a class="lightbox_save_close" href="#" >OK<a> <a class="lightbox_close" href="#" >Cancel</a>
- </div>
- </div>
- </body>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement