Pop Window using J query...

/***************  Pop Window using J query...  *************** /

Require following Script and Js File.....

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

---------------------------------------------------------------------------------------------------------
 <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
  </style>
------------------------------------------------------------------------------------------------------------
  <script>
      $(function () {
      var name = $("#name"),
      Age = $("#Age"),
      Relation = $("#Relation"),
      Dependant = $("#Dependant"),
      Occupation = $("#Occupation"),
      allFields = $([]).add(name).add(Age).add(Relation).add(Dependant).add(Occupation),
      tips = $(".validateTips");
            function updateTips(t) {
              tips
        .text(t)
        .addClass("ui-state-highlight");
              setTimeout(function () {
                  tips.removeClass("ui-state-highlight", 1500);
              }, 500);
          }

          function checkLength(o, n, min, max) {
              if (o.val().length > max || o.val().length < min) {
                  o.addClass("ui-state-error");
                  updateTips("Length of " + n + " must be between " +
          min + " and " + max + ".");
                  return false;
              } else {
                  return true;
              }
          }

          function checkRegexp(o, regexp, n) {
              if (!(regexp.test(o.val()))) {
                  o.addClass("ui-state-error");
                  updateTips(n);
                  return false;
              } else {
                  return true;
              }
          }

          $("#dialog-form").dialog({
              autoOpen: false,
              height: 420,
              width: 350,
              modal: true,
              buttons: {
                  "Create an account": function () {
                      var bValid = true;
                      allFields.removeClass("ui-state-error");

                      bValid = bValid && checkLength(name, "Name", 3, 16);
                      bValid = bValid && checkLength(Age, "Age", 1, 3);
                      bValid = bValid && checkLength(Relation, "Relation", 1, 16);
                      bValid = bValid && checkLength(Occupation, "Occupation", 1, 16);
                      bValid = bValid && checkLength(Dependant, "Dependant", 1, 16);

                      bValid = bValid && checkRegexp(name, /^[a-z][A-Z]([0-9a-z_ ])+$/i, "Name may consist of a-z, 0-9, underscores, begin with a letter.");
                      // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                      bValid = bValid && checkRegexp(Age, /^([0-9])+$/i, "Age may consist of 0-9 begin with a Digit.");
                      bValid = bValid && checkRegexp(Relation, /^[a-z]([0-9a-z_])+$/i, "Relation may consist of a-z, 0-9, underscores, begin with a letter.");
                      bValid = bValid && checkRegexp(Occupation, /^[a-z]([0-9a-z_])+$/i, "Occupation may consist of a-z, 0-9, underscores, begin with a letter.");
                      bValid = bValid && checkRegexp(Dependant, /^[a-z]([0-9a-z_])+$/i, "Dependant may consist of a-z, 0-9, underscores, begin with a letter.");


                      if (bValid) {
                          $("#users tbody").append("<tr>" +
//              "<td>" + name.val() + "</td>" +
//              "<td>" + Age.val() + "</td>" +
//              "<td>" + Relation.val() + "</td>" +
//              "<td>" + Occupation.val() + "</td>" +
//              "<td>" + Dependant.val() + "</td>" +
                "<td>" + "<input type='text' name='coupon_field' value = '" + name.val() + "'/>" + "</td>" +
                "<td>" + "<input type='text' name='coupon_field' value = '" + Age.val() + "'/>" + "</td>" +
                "<td>" + "<input type='text' name='coupon_field' value = '" + Relation.val() + "'/>" + "</td>" +
                "<td>" + "<input type='text' name='coupon_field' value = '" + Occupation.val() + "'/>" + "</td>" +
                "<td>" + "<input type='text' name='coupon_field' value = '" + Dependant.val() + "'/>" + "</td>" +
            "</tr>");
                          $(this).dialog("close");
                      }
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              },
              close: function () {
                  allFields.val("").removeClass("ui-state-error");
              }
          });

          $("#create-user")
      .button()
      .click(function () {
            $("#dialog-form").dialog("open");
//          $("#users tbody").append("<tr>" +
//                "<td>" + "<input type='text' name='coupon_field'/>" + "</td>" +
//                "<td>" + "<input type='text' name='coupon_field'/>" + "</td>" +
//                "<td>" + "<input type='text' name='coupon_field'/>" + "</td>" +
//                "<td>" + "<input type='text' name='coupon_field'/>" + "</td>" +
//                "<td>" + "<input type='text' name='coupon_field'/>" + "</td>" +
//            "</tr>");
      });
      });
  </script>

------------------------------------------------------------------------------------------------------------
Form design...
<body>
 
 <div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>
   <form>
   <fieldset>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all">
    <label for="Age">Age</label>
    <input type="text" name="Age" id="Age" value="" class="text ui-widget-content ui-corner-all">
    <label for="Relation">RelationShip</label>
    <input type="text" name="Relation" id="Relation" value="" class="text ui-widget-content ui-corner-all">
    <label for="Occupation">Occupation</label>
    <input type="text" name="Occupation" id="Occupation" value="" class="text ui-widget-content ui-corner-all">
    <label for="Dependant">Dependant</label>
    <input type="text" name="Dependant" id="Dependant" value="" class="text ui-widget-content ui-corner-all">
  </fieldset>
  </form>
</div>

<div id="users-contain" class="ui-widget">
  <h1>Existing Users:</h1>
  <table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Age</th>
        <th>Relationship</th>
        <th>Occupation</th>
        <th>Dependant</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <%--<td> <input type="text" name="coupon_field"/></td>
        <td> <input type="text" name="coupon_field" /></td>
        <td> <input type="text" name="coupon_field" /></td>
        <td> <input type="text" name="coupon_field" /></td>
        <td> <input type="text" name="coupon_field"/></td>--%>
      </tr>
    </tbody>
  </table>
</div>
<button id="create-user">Create new user</button>


</body>
-------------------------------------------------------------------------------------------------------