Check Internet connection, if not add modal

Question

Hello I have this code below that checks if there is an image in the url, if it does not exist. I would like that in the place of Alert that he called a modal informing that this without internet friends someone of this hangman here for friend.

Follow the code below

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<script>
$( document ).ready(function() {
function onLine() {
alert("onLine")
}
function offLine() {
alert("offLine")
}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>

Answer 1

I got so now I need him checking every 5 seconds without refreshing the page below as it was

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


 <!-- Modal -->
    <div id="myModal" class="modal fade" role="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">Esta sem conexão</h4>
          </div>
          <div class="modal-body">
            <p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>


<script>
$( document ).ready(function() {
function onLine() {

//$('#myModal').modal('hidde');


}
function offLine() {

$('#myModal').modal('show');


}
var i = new Image();
i.onload = onLine;
i.onerror = offLine;
i.src = 'http://www.google-analytics.com/__utm.gif';
});
</script>

Answer 2

I don’t understand your problem. What is your real difficulty? No Jquery? No Javascript?

If in Javascript try to replace your alert by this stretch:

window.showModalDialog('suapagina.html', self, 'status:no;resizable:yes;help:no;scroll:no;width:1000;height:600')