Popup First time

<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">&times;</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>

Leave a comment