modal working on firefox and IE but not chrome

Question

not sure why my modal not working in chrome. upon click only the background showing faded and chrome dev tool load before and after at the same time with no content in between.

codepen here: codepen.io/tnguyenbco/pen/BLjGbV

i link the modal body with another HTML on click it load and pop up

CSS as below:

.modal{background:rgba(45,160,224,0.95);}
.modal-dialog{width:auto;
margin:0;}
.modal.fade .modal-dialog, .modal.in .modal-dialog {transform: none;}
.modal-backdrop.in{opacity:0;}

#myModal .modal-content {
border: 0;
border-radius: 0;
box-shadow: none;
padding: 81px 0;
background:none;
color:#ffffff;

}

.modal-title{margin-bottom:16px;
font-weight:700;}

.exit-modal{
font-size:48px;
text-align:right;
line-height: 1;
margin-bottom:24px;}

and html to link the modal is

<a href="service-1-modal.html" data-toggle="modal" data-target="#myModal">

Answer 1

I think i figured it out. seem like chrome is blocking cross origin requests when i link my own modal from an external html file. Tested with heroku and it's working.

Thanks all