bitetti

Show popup in first visit

Jul 24th, 2013
100
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.52 KB | None | 0 0
  1. <!doctype HTML>
  2. <html>
  3.     <head>
  4.         <title>teste</title>
  5.         <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
  6.     </head>
  7. <body>
  8.  
  9. <!-- a + tem uma id ai -->
  10. <a href="#openModal" id="openModalButton">Open Modal</a>
  11.  
  12.  
  13. <div id="modalDialog" style="display:none;" class="modalDialog">
  14.     <style type="text/css" scoped="scoped">
  15.     .modalDialog {
  16.         position: fixed;
  17.         font-family: Arial, Helvetica, sans-serif;
  18.         top: 0;
  19.         right: 0;
  20.         bottom: 0;
  21.         left: 0;
  22.         background: rgba(0,0,0,0.8);
  23.         z-index: 99999;
  24.  
  25.         /*opacity:0;
  26.         pointer-events: none;*/
  27.  
  28.         -webkit-transition: opacity 400ms ease-in;
  29.         -moz-transition: opacity 400ms ease-in;
  30.         transition: opacity 400ms ease-in;
  31.     }
  32.  
  33.     .modalDialog > div {
  34.         width: 400px;
  35.         position: relative;
  36.         margin: 10% auto;
  37.         padding: 5px 20px 13px 20px;
  38.         border-radius: 10px;
  39.         background: #fff;
  40.         background: -moz-linear-gradient(#fff, #999);
  41.         background: -webkit-linear-gradient(#fff, #999);
  42.         background: -o-linear-gradient(#fff, #999);
  43.     }
  44.  
  45.  
  46.     /* botao q fecha */
  47.     .close {
  48.         background: #606061;
  49.         color: #FFFFFF;
  50.         line-height: 25px;
  51.         position: absolute;
  52.         right: -12px;
  53.         text-align: center;
  54.         top: -10px;
  55.         width: 24px;
  56.         text-decoration: none;
  57.         font-weight: bold;
  58.         -webkit-border-radius: 12px;
  59.         -moz-border-radius: 12px;
  60.         border-radius: 12px;
  61.         -moz-box-shadow: 1px 1px 3px #000;
  62.         -webkit-box-shadow: 1px 1px 3px #000;
  63.         box-shadow: 1px 1px 3px #000;
  64.     }
  65.  
  66.     .close:hover { background: #00d9ff; }
  67.     </style>
  68.     <div>
  69.         <a href="#close" title="Close" class="close">X</a>
  70.         <h2>Modal Box</h2>
  71.         <p>This is a sample modal box that can be created using the powers of CSS3.</p>
  72.         <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
  73.     </div>
  74.  
  75.     <script type="text/javascript">
  76.  
  77.     var _modalDialog = null;
  78.     var _closeButton = null;
  79.  
  80.     $(window).ready(
  81.         function()
  82.         {
  83.             _modalDialog = $("#modalDialog");
  84.             _closeButton = $($(".close")[0]);
  85.  
  86.             if(typeof(Storage)!=="undefined")
  87.             {
  88.                 if (localStorage.visitNumbers)
  89.                 {
  90.                     localStorage.visitNumbers = parseInt(localStorage.visitNumbers) + 1;
  91.                 } else {
  92.                     // Se for primeira visita exibe a caixa
  93.                     localStorage.visitNumbers = 1;
  94.                     _modalDialog.fadeIn(400);
  95.                 }
  96.             }
  97.  
  98.             $("#openModalButton").click( function() {
  99.                 _modalDialog.fadeIn(400);
  100.             });
  101.             _closeButton.click( function() {
  102.                 _modalDialog.fadeOut(400); 
  103.             });
  104.         }
  105.  
  106.     );
  107.  
  108.     </script>
  109. </div>
  110.  
  111.  
  112.  
  113. </body>
  114. </html>
Advertisement
Add Comment
Please, Sign In to add comment