<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
#popup-container {
//margin: 10px 10px 10px 10px;
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
width: 990px;
margin: 0 auto;
}
.modal-content {
background-color: rgba(38, 38, 40, 0.92);
color: #fff;
padding: 20px 40px;
}
.modal-content input {
height: 57px;
border-radius: 0px;
}
.modal-content .btn-primary {
width: 100%;
background-color: #ef9919;
border: 0px;
}
.modal-content .btn-primary:hover {
background-color: #0073b7;
border: 0px;
}
.modal-content .logorow {
text-align: center;
}
.close {
margin-right: 10px;
margin-top: 5px;
color: #fff;
opacity: .8;
}
.close:hover {
color: #efefef;
}
</style>
<div id="popup-container">
<div id="popup-window">
<div class="modal-content modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<a href="#" class="your-class"></a>
<div>
<div class="row text-center">
<img src="https://www.solodev.com/core/fileparse.php/257/urlt/logo.png" />
</div>
<div class="row text-center">
<h1>Newsletter Signup</h1>
<p>Fill out the form below to signup for our weekly newsletter.</p>
</div>
<form class="row" id="contact" name="contact" method="post" action="php/process.html">
<div class="form-group col-md-6 col-lg-6">
<input type="text" name="name" id="name" placeholder="Your Name" required>
</div>
<!-- end form-group -->
<div class="form-group col-md-6 col-lg-6">
<input type="text" name="surname" id="surname" placeholder="Your Surname" required>
</div>
<!-- end form-group -->
<div class="form-group col-md-6 col-lg-6">
<input type="email" name="email" id="email" style="width:100%" placeholder="Your Email" required>
</div>
<!-- end form-group -->
<div class="form-group col-md-6 col-lg-6">
<input type="text" name="phone" id="phone" minlength="10" maxlength="10" size="10" placeholder="Your Phone" required>
</div>
<!-- end form-group -->
<div class="form-group col-md-6 col-lg-12">
<textarea name="message" id="message" style="width:100%" placeholder="Your Message" required></textarea>
</div>
<div class="form-group col-12">
<input id="submit" type="submit" name="contact_submit">
</div>
<!-- end form-group -->
</form>
<br><br>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.close').click(function(){
jQuery('#popup-container').fadeOut();
jQuery('#active-popup').fadeOut();
});
var visits = jQuery.cookie('visits') || 0;
visits++;
jQuery.cookie('visits', visits, { expires: 1, path: '/' });
console.debug(jQuery.cookie('visits'));
if ( jQuery.cookie('visits') > 1 ) {
jQuery('#active-popup').hide();
jQuery('#popup-container').hide();
} else {
var pageHeight = jQuery(document).height();
jQuery('<div id="active-popup"></div>').insertBefore('body');
jQuery('#active-popup').css("height", pageHeight);
jQuery('#popup-container').show();
}
if (jQuery.cookie('noShowWelcome')) { jQuery('#popup-container').hide(); jQuery('#active-popup').hide(); }
});
jQuery(document).mouseup(function(e){
var container = jQuery('#popup-container');
if( !container.is(e.target)&& container.has(e.target).length === 0)
{
container.fadeOut();
jQuery('#active-popup').fadeOut();
}
});
</script>
Published