External Link Popup

by dhavaljani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row mt-5">
	  <div class="col-sm-12">
		  <p class="text-center">
		    <a href="https://www.google.com" class="btn btn-info btn-lg cta-open">External Link</a> <a href="https://jsfiddle.net/dhavaljani/qbwacmep/" class="btn btn-info btn-lg cta-open">Internal Link</a>
		  </p>
	  </div>
  </div>
</div>

<!-- start modal-->
<div class="modal fade" id="speedbump" role="dialog">
	<div class="modal-dialog">
	  <!-- Modal content-->
	  <div class="modal-content">
		<div class="modal-header">
		  <button type="button" class="close" data-dismiss="modal">&times;</button>
		  <h4 class="modal-title">Notice</h4>
		</div>
		<div class="modal-body">
		  <p>You are now leaving our website website.</p>
		</div>
		<div class="modal-footer text-center">
		  <button type="button" title="continue" class="btn btn-modal btn-continue" data-dismiss="modal">Continue</button>
		  <button type="button" title="go back" class="btn btn-modal btn-close" data-dismiss="modal">Go Back</button>
		</div>
	  </div>

	</div>
</div>
<!--end modal-->

CSS

div#speedbump {
  display: none;
  z-index: 9999;
  position: fixed;
  top: 0;
  width: 100%;
  background: #eeeeee;
}
#speedbump h4.modal-title {
  text-align: center;
  text-transform: uppercase;
  color: #004795;
  font-size:2.5em;	
}
.modal-body p {
  text-align:center;
  font-size: 1em;
}
button.btn-modal:hover {
  cursor: pointer;
}
button.btn-modal.btn-continue {
  background-color: #8bc63e;
  border: 0px;
  margin: 1% 0;
}
button.btn-modal.btn-close {
  background-color: inherit;
  border: 1px solid #030000;
  color: #030000;
  font-weight: 400;
}
.modal-header .close {
  font-size: 3.5em;
}

JavaScript

// Open external links in a popup modal notice
$(window).on('load', function(){
	
	$.expr[":"].external = function(a) {
		//var linkHref = a.hostname;
		//var domainHref = location.hostname;
		
		var linkhn = a.hostname.split('.').reverse();
		var linkHref = linkhn[1] + "." + linkhn[0];
		
		var domainhn = window.location.hostname.split('.').reverse();
		var domainHref = domainhn[1] + "." + domainhn[0];
	
		return !a.href.match(/^mailto\:/) && !a.href.match(/^tel\:/) && linkHref !== domainHref;
	};
	
	$("a:external").addClass("ext_link");
	
	$(function() {
		
		$('a.ext_link').click(function() {
			 // open a modal 
			$('a:external').attr('data-toggle', 'modal');
			$('a:external').attr('data-target', '#speedbump');
			//go to link on modal close
			var url = $(this).attr('href');
			$('.btn-modal.btn-continue').click(function() {
				window.open(url);
				$('.btn-modal.btn-continue').off();
			});
			$('.btn-modal.btn-close').click(function() {
				$('#speedbump').modal('hide');
				$('.btn-modal.btn-close').off();
			}); 
		});
		
	});  
});