Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>@ViewBag.Title</title>
  @Styles.Render("~/Content/css")
  @Scripts.Render("~/bundles/modernizr")
  @Styles.Render("~/Content/bootstrap.min.css")
  <link rel="stylesheet" href="/Mickey/stylesheet.css" type="text/css" />
  <style type="text/css">
  
  .albiLogo
    {
      background: url("Images/AlbacoreLogo.jpg");
      background-position: center center;
      background-repeat: no-repeat;
      display: block;
      height: 100px;
    }
    
    .mvcBootstrapLogo
    {
      font-family: mickeyregular;
      font-size: 44px;
      color: white;
      margin-right: 20px;
    }
    
    .mvcBootstrapLogo:hover
    {
      font-family: mickeyregular;
      font-size: 44px;
      color: fuchsia;
      margin-right: 20px;
    }
    
   .dropdown-menu > li
   {
     position: relative;
     -webkit-user-select: none; /* Chrome/Safari */
     -moz-user-select: none; /* Firefox */
     -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */
     -o-user-select: none;
     user-select: none;
     cursor: pointer;
   }
    
   .dropdown-menu .sub-menu
   {
     left: 100%;
     position: absolute;
     top: 0;
     display: none;
     margin-top: -1px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-left-color: #fff;
     box-shadow: none;
   }
   
  .txtBlue
  {
    color: blue;
  }

  .txtWhite {
    color: #ffffff;

  }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <nav class="navbar navbar-inverse" style="margin-top: 5px;">
          <div class="container container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                  class="icon-bar"></span><span class="icon-bar"></span>
              </button>
              @Html.ActionLink("MvcBootStrap", "Index", new { controller = "Home" }, new { @class = "navbar-brand, mvcBootstrapLogo" })
            </div>
            <div id="navbar" class="navbar-inner">
              <ul class="nav navbar-nav">
                @*LogIn*@
                <li><button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalLogIn">Log In</button></li>
                @*Examples*@
                <li id="ddExamples" class="dropdown">
                  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Examples <span class="caret"></span>
                  </button>
                  <ul id="ddExamples-menu" class="dropdown-menu">
                    <li>@Html.ActionLink("Carousel", "Carousel", new { controller = "Home" })</li>
                    <li>@Html.ActionLink("Comics API", "ComicsAPI", new { controller = "Home" })</li>
                    <li>@Html.ActionLink("Responsive Grids", "Columnizer", new { controller = "Home" })</li>
                  </ul>
                </li>
                @*Snippets*@
                <li id="ddSnippets" class="dropdown">
                  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    Snippets <span class="caret"></span>
                  </button>
                  <ul id="ddSnippets-menu" class="dropdown-menu" role="menu">
                    @*API*@
                    <li id="ddComicsAPI" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddComicsAPI">API  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddComicsAPI-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("Comics API", "ComicsAPI_controller", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                    @*Controllers*@
                    <li id="ddControllers" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddControllers-menu">Controllers  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddControllers-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("ComicsAPI", "ComicsAPI_controller", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Home", "Home_controller", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Snippets", "Snippets_controller", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                    @*Style*@
                    <li id="ddStyle" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddStyle">CSS  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddStyle-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("MyStyle", "MyStyle_style", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                    @*JavaScript*@
                    <li id="ddJS" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddJS-menu">Javascript  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddJS-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("_Layout", "Layout_js", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                    @*Modals*@
                    <li id="ddModals" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddModals">Modals  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddModals-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("Contact Us", "ContactUs_modal", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Forgot Log In", "ForgotLogIn_modal", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Log In", "LogIn_modal", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Register", "Register_modal", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                   @*Models*@
                    <li id="ddModels" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddModels-menu">Models  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddModels-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("Comic", "Comic_model", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                     @*Views*@
                    <li id="ddViews" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"
                      data-target="ddViews">Views  <span class="glyphicon glyphicon-triangle-right"></span></a>
                      <ul id="ddViews-menu" class="dropdown-menu submenu sub-menu">
                        <li>@Html.ActionLink("_Layout", "Layout_cshtml", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Carousel", "Carousel_cshtml", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Comics4Sale", "Comics4Sale_cshtml", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Comics API", "ComicsAPI_cshtml", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Index", "Index_cshtml", new { controller = "Snippets" })</li>
                        <li>@Html.ActionLink("Responsive Grids", "Columnizer_cshtml", new { controller = "Snippets" })</li>
                      </ul>
                    </li>
                    
                    @*Add new lineitems here*@
                  </ul>
                </li>
                <li>@Html.ActionLink("Home", "Index", new { controller = "Home" })</li>
                <li><a href="#" data-toggle="modal" data-target="#modalContactUs">Contact Us</a></li>
                <li>@Html.ActionLink("About", "About", new { controller = "Home" })</li>
              </ul>
            </div>
          </div>
        </nav>
      </div>
    </div>
    <div class="row row-fluid">
     @*@Html.Partial("~/Views/PartialViews/_logInpets.cshtml")
      <form class="navbar-form navbar-left">
        <input id="txtEmail" type="text" placeholder="User Name" class="form-control" />
        <input id="txtPword" type="password" placeholder="Password" class="form-control" />
        <button id="btnLogIn" name="btnLogIn" class="btn btn-info btn-sm" type="button" onclick="ajaxLogInn();">
         Log In
        </button>
        <a href="#" data-toggle="modal" data-target="#modalForgotLogIn" class="btn mybtn-info">
          Forgot Log In</a> <a href="#" data-toggle="modal" data-target="#modalRegister" class="btn mybtn-info">
          Register</a> @Html.ActionLink("Register", "Register", new { controller = "Home" })
      </form>*@
    </div>
    <div class="row row-fluid" style="padding: 2px 0 10px 0; color: blue; font-size: large;">
      <label id="lblErrMsg" class="control-label">@ViewBag.lblErrMsg</label>
    </div> 

    @RenderBody()

    <footer>
      <div class="row text-center txtBlue">
        copyright © MvcBootstrap 2015
      </div>
    </footer>
   
    @*Contact Us*@
    <div id="modalContactUs" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">
              Contact Us</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form" method="post">
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="txtEmailC" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="txtEmailC" name="txtEmailC" placeholder="example@domain.com"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="message" class="col-sm-2 control-label">Message</label>
                <div class="col-sm-10">
                  <textarea class="form-control" rows="4" name="message"></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary" />
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <div class="text-center">Jerry Allen  714-801-8862</div>
          </div>
        </div>
      </div>
    </div>

  
    @*Log In*@
    <div id="modalLogIn" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Log In</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form" method="post">
              <div class="form-group">
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtUnameL" name="txtUnameL" placeholder="User Name"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtPasswordL" name="txtPasswordL" placeholder="Password" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <input id="btnSubmitL" name="submit" type="submit" value="Submit" class="btn btn-info" />
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modalRegister">Register</button>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modalForgotLogIn">Forgot Log In</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

      @*Forgot LogIn*@
    <div id="modalForgotLogIn" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Forgot Log In</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form" method="post">
              <div class="form-group">
                <label for="name" class="col-sm-2 control-label">User</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="nameF" name="nameF" placeholder="User Name"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="txtEmailM" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="txtEmailM" name="txtEmailM" placeholder="example@domain.com"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <input id="submitF" name="submit" type="submit" value="Send" class="btn btn-primary" />
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>


    @*Register*@
    <div id="modalRegister" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h4 class="modal-title">Register</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form" method="post">
              <div class="form-group">
                <label for="txtUnameM" class="col-sm-3 control-label">
                  User Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtUnameM" name="txtUnameM" placeholder="User Name"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="txtEmailM2" class="col-sm-3 control-label">
                  Email</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtEmailM2" name="txtEmailM2" placeholder="example@domain.com"
                    value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="txtPasswordM" class="col-sm-3 control-label">Password</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtPasswordM" name="txtPasswordM" value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="txtFnameM" class="col-sm-3 control-label">First Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtFnameM" name="txtFnameM" value="" />
                </div>
              </div>
              <div class="form-group">
                <label for="txtLnameM" class="col-sm-3 control-label">Last Name</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="txtLnameM" name="txtLnameM" value="" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                  <! Will be used to display an alert to the user>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <input id="btnSubmitM" name="submit" type="submit" value="Submit" class="btn btn-primary" />
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <script src="~/Scripts/jquery-2.1.4.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <link href="../../Style/MyStyle.css" rel="stylesheet" type="text/css" />
   

  </div>
  <script type="text/javascript">

    function AlbacoreComics() {
      var url = '@Url.Content("~/Index/AlbacoreComics")';
      window.location.href = url;
    }

    function searchByTitle() {
      var txtval = document.getElementById("txtSearch").value;
      var url = '@Url.Content("~/Index/AlbacoreComics")';
      url.replace("-999", txtval);
      window.location.href = url;
    }

    function ajaxSearchByTitle() {
      var title = document.getElementById("txtSearch").value;

      $.ajax({
        url: 'Home/ComicsByTitle',
        data: { inString: title },
        success: function (data) {
          if (data == 'True') {
            document.getElementById("lblErrMsg").innerHTML = "Howdy " + document.getElementById("txtEmail").value;
          }
          else {
            document.getElementById("lblErrMsg").innerHTML = "Invalid Search: " + title;
          }
        },
        error: function (e) {
          alert('Search Error occured ' + e);
        }
      });
    }

    function ajaxLogInn() {
      var instring = document.getElementById("txtEmail").value + ";pWord=" + document.getElementById("txtPword").value;
      $.ajax({
        url: 'Home/LogInn',
        data: { inString: instring },
        success: function (data) {
          if (data == 'True') {
            document.getElementById("lblErrMsg").innerHTML = "Howdy " + document.getElementById("txtEmail").value + ". Thanks for stopping by.";
          }
          else {
            document.getElementById("lblErrMsg").innerHTML = "Invalid Login credentials";
          }
        },
        error: function (e) {
          alert('MvcBootstrap Log In error occured ' + e);
        }
      });
    }

    function logEmIn(inString) {
      alert("432 logEmIn= " + inString);
    }

    //Handle dropdowns
    $('#ddAjax').hover(function () {
      $('#ddAjax-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddAjax-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddComicsAPI').hover(function () {
      $('#ddComicsAPI-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddComicsAPI-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddComicStore').hover(function () {
      $('#ddComicStore-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddComicStore-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddControllers').hover(function () {
      $('#ddControllers-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddControllers-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddCSS').hover(function () {
      $('#ddCSS-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddCSS-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddCSharp').hover(function () {
      $('#ddCSharp-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddCSharp-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddExamples').hover(function () {
      $('#ddExamples-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddExamples-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddViews').hover(function () {
      $('#ddViews-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddViews-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddJS').hover(function () {
      $('#ddJS-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddJS-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddModels').hover(function () {
      $('#ddModels-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddModels-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddModals').hover(function () {
      $('#ddModals-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddModals-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddSnippets').hover(function () {
      $('#ddSnippets-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddSnippets-menu').stop(true, true).delay(200).fadeOut("fast");
    });

    $('#ddStyle').hover(function () {
      $('#ddStyle-menu').stop(true, true).delay(200).fadeIn(500);
    }, function () {
      $('#ddStyle-menu').stop(true, true).delay(200).fadeOut("fast");
    })

    //handle stacked Modals

    $('#modalRegister').on('show', function () {
      $('#modalLogIn').css('opacity', .5);
      $('#modalLogIn').unbind();
    });
    $('#modalRegister').on('hidden', function () {
      $('#modalLogIn').css('opacity', 1);
      $('#modalLogIn').removeData("modal").modal({});
    });

    $('#modalForgotLogIn').on('show', function () {
      $('#modalLogIn').css('opacity', .5);
      $('#modalLogIn').unbind();
    });
    $('#modalForgotLogIn').on('hidden', function () {
      $('#modalLogIn').css('opacity', 1);
      $('#modalLogIn').removeData("modal").modal({});
    });



  </script>
@*
  Works in progress: get the submit button to work on my modals
  These are snippets from various sources to try out*@
  <script type="text/javascript">

    //http: //bootsnipp.com/snippets/featured/modal-login-with-jquery-effects

    //modalContactUs
    //modalForgotLogIn
    //modalRegister

    $("form").submit(function () {
      switch (this.id) {
        case "login-form":
          var $lg_username = $('#login_username').val();
          var $lg_password = $('#login_password').val();
          if ($lg_username == "ERROR") {
            msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
          } else {
            msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
          }
          return false;
          break;
        case "lost-form":
          var $ls_email = $('#lost_email').val();
          if ($ls_email == "ERROR") {
            msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
          } else {
            msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
          }
          return false;
          break;
        case "register-form":
          var $rg_username = $('#register_username').val();
          var $rg_email = $('#register_email').val();
          var $rg_password = $('#register_password').val();
          if ($rg_username == "ERROR") {
            msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
          } else {
            msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
          }
          return false;
          break;
        default:
          return false;
      }
      return false;
    });
    
  </script>

 @* http://stackoverflow.com/questions/32285593/bootstrap-modal-login-with-ajax*@
         <script>
           $('#form').submit(function (e) {

             var form = $(this);
             var formdata = false;
             if (window.FormData) {
               formdata = new FormData(form[0]);
             }

             var formAction = form.attr('action');

             $.ajax({
               type: 'POST',
               url: 'login.php',
               cache: false,
               data: formdata ? formdata : form.serialize(),
               contentType: false,
               processData: false,
               dataType: 'json',

               success: function (response) {
                 //TARGET THE MESSAGES DIV IN THE MODAL
                 if (response.type == 'success') {
                   $('#messages').addClass('alert alert-success').text(response.message);
                 } else {
                   $('#messages').addClass('alert alert-danger').text(response.message);
                 }
               }
             });
             e.preventDefault();
           });
	

//If you want to implement AJAX, the button which does the submission has a type of submit and fires the submit event on the form, which will not let your code even reach the function that does the AJAX call.
//Instead, you could change the type of the button from submit to button, and add the following handler to trigger when the form submits:

//$('#login').submit(function(){
//      //prepare your username, password and callback
//      login(username, password, callback);
//});


      

       @* check out;  prepend message to Modal
        https://www.youtube.com/watch?v=CvwiXDZqp-E
        <pop:form id="contact-form" name="contact">
          <pop:success>
            <div class="alert-box success form-feedback">Thank you.  I'll get back to you"
          </pop:success>

          <pop:error>
            <div class="alert-box error form-feedback>There was an error.
          </pop:error>
             Name & textbox etc

       $(function() }
         $("#contact-form").submit(function(e) {
           e.preventDefault();

           $form=$(this);

           $.post(document.location.url, $(this).serialize(), function(data) {
             $feedback = $("<div>").html(data).find(".form-feedback").hide();

             $form.prepend($feedback)[0].reset();
             $feedback.fadeIn(1500);

             });
            });
         })*@
         
  </script>
</body>
</html>