"exit pop up test"
Bootstrap 3.3.0 Snippet by verbatim

<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>', css: '#bio_ep {width: 100%; height: 100%; color: #333; background-color: #fafafa; text-align: center;}' + '#bio_ep_content {padding: 24px 0 0 0; font-family: "Titillium Web";}' + '#bio_ep_content span:nth-child(2) {display: block; color: #f21b1b; font-size: 32px; font-weight: 600;}' + '#bio_ep_content span:nth-child(3) {display: block; font-size: 16px;}' + '#bio_ep_content span:nth-child(4) {display: block; margin: -5px 0 0 0; font-size: 16px; font-weight: 600;}' + '.bio_btn {display: inline-block; margin: 18px 0 0 0; padding: 7px; color: #fff; font-size: 14px; font-weight: 600; background-color: #70bb39; border: 1px solid #47ad0b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-decoration: none;}', fonts: ['//fonts.googleapis.com/css?family=Titillium+Web:300,400,600'], cookieExp: 0 }); </script> </head> <body> <p>Move your cusor above this window after 5 seconds.</p> </body> </html>
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%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('http://automotiveenginesales.com/car-part/img/waiting.gif') 50% 50% no-repeat; opacity: 0.80; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80); filter: alpha(opacity = 80)}; /* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ body.loading { overflow: hidden; } /* Anytime the body has the loading class, our modal element will be visible */ body.loading .modal { display: block; } /* bootstrap css */ .container2 { background: none repeat scroll 0 0 rgba(225, 150, 214, 0.8); } /* body{ margin-top:40px; } .stepwizard-step p { margin-top: 10px; } .stepwizard-row { display: table-row; } .stepwizard { display: table; width: 100%; position: relative; } .stepwizard-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .stepwizard-row:before { top: 14px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .stepwizard-step { display: table-cell; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } */
$(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"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); });

Related: See More


Questions / Comments: