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

 

 

index.html

 

 

<div class="container">
  <div class="row mt-5">
      <div class="col-sm-12">
          <p class="text-center">
            <a href="https://www.solodev.com" class="btn btn-info btn-lg cta-open">External Link</a> <a href="#" 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">×</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-->

<style>

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;
}

</style>

<script>

// 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();
            }); 
        });
        
    });  
});

</script>

Leave a Reply