"exit pop up test"
Bootstrap 3.3.0 Snippet by verbatim

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.automotiveenginesales.com/car-part/js/jquery-ui-1.10.4/themes/base/minified/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="http://www.automotiveenginesales.com/car-part/css/car-part.css" />
<script src="http://www.automotiveenginesales.com/car-part/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://www.automotiveenginesales.com/car-part/js/jquery.json-2.4.min.js" type="text/javascript"></script>
<script src="http://www.automotiveenginesales.com/car-part/js/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://www.automotiveenginesales.com/car-part/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://www.automotiveenginesales.com/car-part/js/jquery-validate-additional-methods.js" type="text/javascript"></script>
<script src="http://www.automotiveenginesales.com/car-part/js/jquery.cookie.js" type="text/javascript"></script>
<script src="http://www.automotiveenginesales.com/car-part/js/car-part.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://beeker.io/lab/exit-intent-popup/bioep.min.js"></script>
<script type="text/javascript">
bioEp.init({
html: '<div id="bio_ep_content">' +
'<div id="dialog-modal" title="MessageBox"> </div> <div class="content" id="content"> <form name="search1_form" id="search1_form" action="http://www.automotiveenginesales.com/cgi-bin/car-part/search.cgi" method="post" accept-charset="utf-8"> <table width="80%" border="0" cellspacing="2">' +
'<tr> <td>Year</td><td><select name="year" size="1" id="year" required autofocus> <option value="" selected="selected">Select Year<option>2016<option>2015<option>2014<option>2013<option>2012<option>2011<option>2010<option>2009<option>2008<option>2007<option>2006<option>2005<option>2004<option>2003<option>2002<option>2001<option>2000<option>1999<option>1998<option>1997<option>1996<option>1995<option>1994<option>1993<option>1992<option>1991<option>1990<option>1989<option>1988<option>1987<option>1986<option>1985<option>1984<option>1983<option>1982<option>1981<option>1980<option>1979<option>1978<option>1977<option>1976<option>1975<option>1974<option>1973<option>1972<option>1971<option>1970<option>1969<option>1968<option>1967<option>1966<option>1965<option>1964<option>1963<option>1962<option>1961<option>1960<option>1959<option>1958<option>1957<option>1956<option>1955<option>1954<option>1953<option>1952<option>1951<option>1950<option>1949<option>1948<option>1947<option>1946<option>1945<option>1944<option>1943<option>1942<option>1941<option>1940<option>1939<option>1938<option>1937<option>1936<option>1935<option>1934<option>1933<option>1932<option>1931<option>1930<option>1929<option>1928<option>1927<option>1926<option>1925<option>1924<option>1923<option>1922<option>1921<option>1920<option>1919<option>1918<option>1917<option>1916<option>1915<option>1914<option>1913<option>1912<option>1911<option>1910<option>1909<option>1908<option>1907<option>1906<option>1905<option>1904<option>1903<option>1902<option>1901<option>1900 </select></td> <td><label for="year" class = "error"></td> </tr>' +
'<tr> <td>Make/Model</td><td><select name="model" id="model" required autofocus> <option value="" selected="selected">Select Make/Model <option>AMC Ambassador <option>AMC American <option>AMC AMX <option>AMC Classic <option>AMC Concord <option>AMC Eagle <option>AMC Gremlin <option>AMC Hornet <option>AMC Javelin <option>AMC Marlin <option>AMC Matador <option>AMC Pacer <option>AMC Rambler <option>AMC Rebel <option>AMC Spirit <option>AMC Other <option>Acura CL <option>Acura CSX <option>Acura EL <option>Acura ILX <option>Acura Integra <option>Acura Legend <option>Acura MDX <option>Acura NSX <option>Acura RDX <option>Acura RL <option>Acura RLX <option>Acura RSX <option>Acura SLX <option>Acura TL <option>Acura TLX <option>Acura TSX <option>Acura Vigor <option>Acura ZDX <option>Alfa 147 <option>Alfa 164 Sedan <option>Alfa 1750 <option>Alfa 4C <option>Alfa Alfetta <option>Alfa GTV6 <option>Alfa Giulia 1600 <option>Alfa Giulietta <option>Alfa Milano <option>Alfa Mito <option>Alfa Spider-1600 <option>Alfa Spider-1600 Duetto <option>Alfa Spider-2000 <option>Aston Martin <option>Asuna <option>Audi 100 <option>Audi 200 <option>Audi 4000 2 & 4 Door Sedan <option>Audi 4000 Quattro <option>Audi 5000 & 5000 Quattro <option>Audi 80 Series <option>Audi 90 Series <option>Audi A3 <option>Audi A4 <option>Audi A5 <option>Audi A6 <option>Audi A7 <option>Audi A8 <option>Audi AllRoad <option>Audi Cabriolet <option>Audi Coupe GT <option>Audi Coupe Quattro <option>Audi Fox <option>Audi Q3 <option>Audi Q5 <option>Audi Q7 <option>Audi R8 <option>Audi RS4 <option>Audi RS5 <option>Audi RS6 <option>Audi RS7 <option>Audi S3 <option>Audi S4 <option>Audi S5 <option>Audi S6 <option>Audi S7 <option>Audi S8 <option>Audi SQ5 <option>Audi Sport Coupe <option>Audi Super 90 <option>Audi TT <option>Audi V8 Quattro <option>Austin <option>Autocar <option>Avanti ' +
'</select></td> <td><label for="model" class = "error"></td> </tr>' +
'<tr> <td>Part</td><td><select name="part" id="part" size="1" required autofocus><option value="" selected="selected">Select Part <option>Carrier (see also Differential) <option>Differential Assembly (see also Carrier) <option>Engine <option>Transfer Case <option>Transmission </select></td> <td><label for="part" class = "error"></td> </tr>' +
'<tr> <td>User Interchange</td><td><select name="userinterchange" id="userinterchange" required autofocus> <option value="" selected="selected">Select User/Interchange </select></td> <td><label for="userinterchange" class = "error"></td> </tr>' +
'<tr> <td>Email</td><td><input id="email" name="email" value="" size='35' required autofocus/></td> <td><label for="email" class = "error"></td> </tr>' +
'<tr> <td><input type='submit' name="search2" id="search2" value='Search'/></td><td></td> </tr> </table> </form> </div> <div class="modal"></div>' +
'</div>',
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
font-family: Verdana,Arial,Helvetica,Sans-serif
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
h2 {
color: dark;
border-bottom: 1pt solid;
width: 100%;
}
th {
text-align: left;
padding: 2pt;
vertical-align: top;
}
td {
padding: 2pt;
vertical-align: top;
}
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('select:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard React

Questions / Comments: