How to Open External URL in Popup Window or Modal on Button Click Using jQuery in HTML5 Full Project For Beginners


Welcome folks today in this blog post we will be opening external url in popup window or modal on button click using jquery in html5. All the full source code of the application is shown below.




Get Started




In order to get started you need to make an index.html file and copy paste the following code






<div class="container">
  <div class="row mt-5">
      <div class="col-sm-12">
          <p class="text-center">
            <a href="" class="btn btn-info btn-lg cta-open">External Link</a> <a href="#" class="btn btn-info btn-lg cta-open">Internal Link</a>

<!-- 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">×</button>
          <h4 class="modal-title">Notice</h4>
        <div class="modal-body">
          <p>You are now leaving our website website.</p>
        <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>

<!--end modal-->


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;
.modal-body p {
  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;



// 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;
    $(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() {
            $('.btn-modal.btn-close').click(function() {


Leave a Reply