Check Internet connection, if not add modal

0

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 the alert that he called a modal informing that this without internet friends somebody of that gallows here to friend.

Follow the code below

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script><scriptsrc="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(){functiononLine(){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>
    
asked by anonymous 19.05.2017 / 02:18

2 answers

0

I did it now, I need it to be checked every 5 seconds without giving refresh in the page it goes below as it was

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script><scriptsrc="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--><divid="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>
    
19.05.2017 / 02:41
-2

I did not understand your problem. What is your real difficulty? In JQuery? In JavaScript?

If it's in JavaScript try to replace your alert with this snippet:

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