API tools faq
paste
Advertisement
joris

Dialog

joris
Jul 31st, 2012
110
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 6.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head><script type="text/javascript">
  4. //<![CDATA[
  5. try{if (!window.CloudFlare) { var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",mirage:{responsive:0,lazy:0},oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/aav=366183412/"},atok:"b7f17fcbc78a58671cf348971ea836c9",zone:"alessioatzeni.com",rocket:"0",apps:{"dnschanger_detector":{"fix_url":null}}}];var a=document.createElement("script"),b=document.getElementsByTagName("script")[0];a.async=!0;a.src="//ajax.cloudflare.com/cdn-cgi/nexp/aav=4114775854/cloudflare.min.js";b.parentNode.insertBefore(a,b);}}catch(e){};
  6. //]]>
  7. </script>
  8. <script type="text/javascript">
  9. //<![CDATA[
  10. window.__CF=window.__CF||{};window.__CF.AJS={"dnschanger_detector":{"fix_url":null}};
  11. //]]>
  12. </script>
  13.  
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  15. <title>Login Modal Dialog Window with CSS and jQuery</title>
  16. <style type="text/css">
  17. body{
  18.      background:#202020;
  19.      font:bold 12px Arial, Helvetica, sans-serif;
  20.      margin:0;
  21.      padding:0;
  22.      min-width:960px;
  23.      color:#bbbbbb;
  24. }
  25.  
  26. a {
  27.     text-decoration:none;
  28.     color:#00c6ff;
  29. }
  30.  
  31. h1 {
  32.     font: 4em normal Arial, Helvetica, sans-serif;
  33.     padding: 20px;  margin: 0;
  34.     text-align:center;
  35. }
  36.  
  37. h1 small{
  38.     font: 0.2em normal  Arial, Helvetica, sans-serif;
  39.     text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
  40.     display: block;
  41. }
  42.  
  43. h2 {
  44.     color:#bbb;
  45.    font-size:3em;
  46.     text-align:center;
  47.     text-shadow:0 1px 3px #161616;
  48. }
  49.  
  50. .container {width: 960px; margin: 0 auto; overflow: hidden;}
  51.  
  52. #content {  float: left; width: 100%;}
  53.  
  54. .post { margin: 0 auto; padding-bottom: 50px; float: left; width: 960px; }
  55.  
  56. .btn-sign {
  57.     width:460px;
  58.     margin-bottom:20px;
  59.     margin:0 auto;
  60.     padding:20px;
  61.     border-radius:5px;
  62.     background: -moz-linear-gradient(center top, #00c6ff, #018eb6);
  63.    background: -webkit-gradient(linear, left top, left bottom, from(#00c6ff), to(#018eb6));
  64.     background:  -o-linear-gradient(top, #00c6ff, #018eb6);
  65.    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#00c6ff', EndColorStr='#018eb6');
  66.     text-align:center;
  67.     font-size:36px;
  68.     color:#fff;
  69.     text-transform:uppercase;
  70. }
  71.  
  72. .btn-sign a { color:#fff; text-shadow:0 1px 2px #161616; }
  73.  
  74. #mask {
  75.     display: none;
  76.     background: #000;
  77.     position: fixed; left: 0; top: 0;
  78.     z-index: 10;
  79.     width: 100%; height: 100%;
  80.     opacity: 0.8;
  81.     z-index: 999;
  82. }
  83.  
  84. .login-popup{
  85.     display:none;
  86.     background: #333;
  87.     padding: 10px;  
  88.     border: 2px solid #ddd;
  89.     float: left;
  90.     font-size: 1.2em;
  91.     position: fixed;
  92.     top: 50%; left: 50%;
  93.     z-index: 99999;
  94.     box-shadow: 0px 0px 20px #999;
  95.     -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
  96.    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
  97.     border-radius:3px 3px 3px 3px;
  98.     -moz-border-radius: 3px; /* Firefox */
  99.     -webkit-border-radius: 3px; /* Safari, Chrome */
  100. }
  101.  
  102. img.btn_close {
  103.     float: right;
  104.     margin: -28px -28px 0 0;
  105. }
  106.  
  107. fieldset {
  108.     border:none;
  109. }
  110.  
  111. form.signin .textbox label {
  112.     display:block;
  113.     padding-bottom:7px;
  114. }
  115.  
  116. form.signin .textbox span {
  117.     display:block;
  118. }
  119.  
  120. form.signin p, form.signin span {
  121.     color:#999;
  122.     font-size:11px;
  123.     line-height:18px;
  124. }
  125.  
  126. form.signin .textbox input {
  127.     background:#666666;
  128.     border-bottom:1px solid #333;
  129.     border-left:1px solid #000;
  130.     border-right:1px solid #333;
  131.     border-top:1px solid #000;
  132.     color:#fff;
  133.     border-radius: 3px 3px 3px 3px;
  134.     -moz-border-radius: 3px;
  135.     -webkit-border-radius: 3px;
  136.     font:13px Arial, Helvetica, sans-serif;
  137.     padding:6px 6px 4px;
  138.     width:200px;
  139. }
  140.  
  141. form.signin input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
  142. form.signin input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }
  143.  
  144. .button {
  145.     background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
  146.     background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
  147.     background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
  148.    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
  149.     border-color:#000;
  150.  
  151.     border-width:1px;
  152.     border-radius:4px 4px 4px 4px;
  153.     -moz-border-radius: 4px;
  154.     -webkit-border-radius: 4px;
  155.     color:#333;
  156.     cursor:pointer;
  157.     display:inline-block;
  158.     padding:6px 6px 4px;
  159.     margin-top:10px;
  160.     font:12px;
  161.     width:214px;
  162. }
  163.  
  164. .button:hover { background:#ddd; }
  165.  
  166. </style>
  167. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  168. <script type="text/javascript">
  169. $(document).ready(function() {
  170.     $('a.login-window').click(function() {
  171.        
  172.         // Getting the variable's value from a link
  173.         var loginBox = $(this).attr('href');
  174.  
  175.         //Fade in the Popup and add close button
  176.         $(loginBox).fadeIn(300);
  177.        
  178.         //Set the center alignment padding + border
  179.         var popMargTop = ($(loginBox).height() + 24) / 2;
  180.         var popMargLeft = ($(loginBox).width() + 24) / 2;
  181.        
  182.         $(loginBox).css({
  183.             'margin-top' : -popMargTop,
  184.             'margin-left' : -popMargLeft
  185.         });
  186.        
  187.         // Add the mask to body
  188.         $('body').append('<div id="mask"></div>');
  189.         $('#mask').fadeIn(300);
  190.        
  191.         return false;
  192.     });
  193.    
  194.     // When clicking on the button close or the mask layer the popup closed
  195.     $('a.close, #mask').live('click', function() {
  196.       $('#mask , .login-popup').fadeOut(300 , function() {
  197.         $('#mask').remove();  
  198.     });
  199.     return false;
  200.     });
  201. });
  202. </script>
  203. <link rel="canonical" href="http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html" />
  204. </head>
  205. <body>
  206. <h1>Login Modal Dialog Window with CSS and jQuery<small>Tutorial by Alessio Atzeni | <a href="http://www.alessioatzeni.com/blog/login-box-modal-dialog-window-with-css-and-jquery/">View Tutorial</a></small></h1>
  207. <div class="container">
  208.     <div id="content">
  209.    
  210.         <div class="post">
  211.         <h2>Your Login or Sign In Box</h2>
  212.             <div class="btn-sign">
  213.                 <a href="#login-box" class="login-window">Login / Sign In</a>
  214.             </div>
  215.         </div>
  216.        
  217.         <div id="login-box" class="login-popup">
  218.         <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
  219.           <form method="post" class="signin" action="#">
  220.                 <fieldset class="textbox">
  221.                 <label class="username">
  222.                 <span>Username or email</span>
  223.                 <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username">
  224.                 </label>
  225.                
  226.                 <label class="password">
  227.                 <span>Password</span>
  228.                 <input id="password" name="password" value="" type="password" placeholder="Password">
  229.                 </label>
  230.                
  231.                 <button class="submit button" type="button">Sign in</button>
  232.                
  233.                 <p>
  234.                 <a class="forgot" href="#">Forgot your password?</a>
  235.                 </p>
  236.                
  237.                 </fieldset>
  238.           </form>
  239.         </div>
  240.    
  241.     </div>
  242. </div>
  243.  
  244. </body>
  245. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!