POP UP FORM

Posted: July 2, 2012 in Java Scripts

HTML CODE

<link href=”css/basic.css” rel=”stylesheet” type=”text/css” />
<!– IE6 “fix” for the close png image –>
<!–[if lt IE 7]>
<link type=’text/css’ href=’css/basic_ie.css’ rel=’stylesheet’ media=’screen’ />
<![endif]–>
<!– must have –>

<script type=’text/javascript’ src=’js/jquery-1.6.1.min.js’></script>

</head>

<body>
<div id=”basic-modal” style=”float:left; position:fixed; top:330px; right:0px;”> <a href=’#’><img src=”images/get.png” alt=”satisfaction” /></a> </div>
<div id=”basic-modal-content”>
<h5>GET A QUOTE</h5>
<div></div>
<br />
<form name=”form2″ id=”form2″ method=”post” action=”get-a-qoute.php” onsubmit = “validate(this); return ValidBotBoot2()”>
<table width=”350″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td><p>Name:</p></td>
<td><input type=”text” name=”name” id=”name1″/></td>
</tr>
<tr>
<td><p>E-mail:</p></td>
<td><input type=”text” name=”email” id=”email”/></td>
</tr>
<tr>
<td><p>Phone:</p></td>
<td><input type=”text” name=”phone” id=”phone”/></td>
</tr>
<tr>
<td><p>Zip Code:</p></td>
<td><input type=”text” name=”zip” id=”zip”/></td>
</tr>

<tr>
<td>&nbsp;</td>
<td align=”left” style=”margin-left:20px;”><input name=”submit1″ id=”submit1″ type=”submit” value=”Submit” style=”margin-top:10px;” />
<p style=” float:left; margin-left:10px; color:#fff;”>We Respect Your <a href=”privacy.html” >Privacy</a></p>
</td>

</tr>
</table>
</form>
</div>
</body>
<script type=’text/javascript’ src=’js/jquery.simplemodal.js’></script>
<script type=’text/javascript’ src=’js/basic.js’></script>
</html>
=============================================================================================

CSS

#basic-modal-content {display:none;}
#simplemodal-overlay {background-color:#000; cursor:wait;}
#simplemodal-container {width:450px; color:#bbb; background-color:#333; border:4px solid #444; padding:20px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
.basic-modal-content-h5 { font-size:30px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFF; text-align:center; margin-bottom: 1px; padding-left:130px;}
#basic-modal-content p { font-size:12px; color:#FFF; }
#basic-modal-content1 {display:none;}
.basic-modal-content1-h5 { font-size:20px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFF; text-align:center; margin-bottom: 1px; padding-left:20px;}
#basic-modal-content1 p { font-size:12px; color:#FFF; }
#basic-modal-content2 {display:none;}
.basic-modal-content2-h5 { font-size:20px; font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFF; text-align:center; margin-bottom: 1px; padding-left:80px;}
#basic-modal-content2 p { font-size:12px; color:#FFF; }
.input {width:275px; height:35px; height:15px\9; float:left; background-color:#ededed; border-radius:7px; border:1px solid #CCC; margin:3px 0 3px 0; text-indent:10px; color:#383838; font-family:Verdana, Geneva, sans-serif; font-size:12px; padding:8px 0 8px 10px\9;}
.submit {width:100px; height:35px; float:left; background-color:#900; border-radius:10px; color:#fff; cursor:pointer; border:none;}

=============================================================================================

JS

/*
* SimpleModal Basic Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin – http://ericmmartin.com
*
* Licensed under the MIT license:
*   http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: basic.js 254 2010-07-23 05:14:44Z emartin24 $
*/

jQuery(function ($) {
// Load dialog on page load
//$(‘#basic-modal-content’).modal();

// Load dialog on click
$(‘#basic-modal .basic’).click(function (e) {
$(‘#basic-modal-content’).modal();

return false;
});
});

jQuery(function ($) {
// Load dialog on page load
//$(‘#basic-modal-content’).modal();

// Load dialog on click
$(‘#basic-modal1 .basic1’).click(function (e) {
$(‘#basic-modal-content1’).modal();

return false;
});
});

jQuery(function ($) {
// Load dialog on page load
//$(‘#basic-modal-content’).modal();

// Load dialog on click
$(‘#basic-modal2 .basic2’).click(function (e) {
$(‘#basic-modal-content2′).modal();

return false;
});
});

Download this <script type=’text/javascript’ src=’js/jquery-1.7.1.min.js’></script> JS From :
http://code.jquery.com/jquery-1.7.1.min.js

Download  <script type=’text/javascript’ src=’js/jquery.simplemodal.js’></script>  JS From :
http://code.google.com/p/simplemodal/downloads/detail?name=jquery.simplemodal.1.4.2.min.js&can=2&q=

=============================================================================================

IMAGES


Advertisements
Comments
  1. I simply want to mention I’m very new to blogging and site-building and seriously enjoyed your page. Very likely I’m likely to bookmark your site . You definitely come with wonderful posts. Bless you for revealing your website.