I am trying to load external resources like website, pdf file using Bootstrap modal window but it does not works for IE, it works fine in Chrome and firefox,
HTML
<img src="images/ajax-loader.gif" id="loading-indicator" style="display:none"/>
<a class="btn btn-primary btn-lg external" data-toggle="modal" href="https://www.taxsimple.com" data-target="#myModal">Load WebSite</a>
<a class="btn btn-primary btn-lg external" data-toggle="modal" href="http://www.irs.gov/pub/irs-pdf/f1098t.pdf" data-target="#myModal">Load PDF</a>
<a class="btn btn-primary btn-lg external" data-toggle="modal" href="https://help.taxsimple.com/identity-protection-pin/" data-target="#myModal">taxsimple help</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe class="modal-body" id="frame1">Browser Doestn support iframe</iframe>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Style
.modal-dialog
{
width:80%;height:100%;
}
.modal-content
{
height:100%;
}
.modal-body
{
width:100%;height:100%;
}
#loading-indicator
{
position: absolute;
left: 500px;
top: 500px;
}
Script
$(document).ready(function() {
$('a.external').on('click', function (e) {
$('#loading-indicator').show();
e.preventDefault();
var url = $(this).attr('href');
$('#frame1').attr('src', url);
});
$('#myModal').on('shown.bs.modal', function () {
$('#loading-indicator').hide();
});
})
has anyone faced such issue, any help will be appreciated.
EDIT:
In case of IE, error gets thrown from script block
[dynamic] file -- 'stLight' is undefined
stLight.options ({publisher: "39544329-cc80-4c4f-a204-3ef09bf3e9a2"});