Need a simple popup (modal, on-page-load with time-delay, fast & clean) JavaScript

By
varanasishop
-
0
899

Good jquery tutorial

http://www.tutorialsteacher.com/jquery/jquery-dom-manipulation

index.html


<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Main Pagetitle>
    <link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css'>
  head>
  <body>
    <h1>Main Page!h1>
    <p>Popup opens after 1 secondp>

    <script src="http://fredgolfrange.com/colorbox/jquery.min.js">script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js">script>
    <script>
      $(document).ready(function () {
            if (document.cookie.indexOf('signupnewsletters=true') == -1) {
                var nintyDay = 90000 * 60 * 60 * 24 * 1;
                var expires = new Date((new Date()).valueOf() + nintyDay);
                document.cookie = "signupnewsletters=true;expires=" + expires.toUTCString();
                setTimeout(openColorBox, 1000);
            }
      function openColorBox() {
        $.colorbox({
          innerWidth:500, 
          innerHeight:300, 
          iframe:true,
          href: "subscribe.html",
          overlayClose:false,
          onLoad: function() {
           // $('#cboxClose').remove();
          }
        });
      }
      });
    script>
  body>
html>
   

subscribe.html (the form):


<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Subscribetitle>
    <link href="http://fredgolfrange.com/newsletterhome/mailinglist.css" rel="stylesheet" type="text/css" />
  head>
  <body class="oneColFixCtr">
    <div id="container">
      <h1>My Signup Formh1>

      <form name="Mail_list" action="save.php" method="post">
        <p>
          <label for="first_name">First Name: label>
          <input type="text" name="first_name" id="first_name" size="25"  autofocus required />
        p>
        <p>
          <label for="last_name">Last Name: label>
          <input type="text" name="last_name" id="last_name" size="25"  required />
        p>
        <input type="submit" value="Submit Form">
        <input type="reset" value="Reset Form">
      form> 
    div>
  body>
html>

save.php


  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Successtitle>
  head>
  <body>
    <p>You submitted: p>
    
    ?>

<script>setTimeout(function(){ window.parent.jQuery.colorbox.close(); }, 1000);script>


  body>
html>

original post is below link
http://community.sitepoint.com/t/need-a-simple-popup-modal-on-page-load-with-time-delay-fast-clean/36860/19