replace javascript alerts with modal

Question

how to replace javascript alerts with a modal box?

The javascript alerts are triggered through an echo depending on some database results

if response is a
{
     <script type="text/javascript">alert("response is a.");</script>
}
else
{
    <script type="text/javascript">alert("response is not a.");</script>
}

I am using bootstrap, if we can replace the alerts with bootstrap modal its perfect

You'll be wanting to override your ``alert`` function for this. Have a look at this question: http://stackoverflow.com/questions/1729501/javascript-overriding-alert — Kippie, Sep 11 '13 at 09:46

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

Took the liberty of creating a jsbin example for you, based on the code you can find in the following question: JavaScript: Overriding alert()

http://jsbin.com/UzUDOno/1/edit

Do note that overriding alert may not be a great idea, especially because you'll be missing out on the blocking properties of regular javascript alerts. As you can see in my example, if you use 2 alerts in quick succession, the last one will override the one(s) before that.

edited May 23 '17 at 12:16

Community

1
1

answered Sep 11 '13 at 10:00

Kippie

3,760
3
23
38

1

Your jsbin example shows a call for `alert('moo')` followed by `alert('cow')`. The "moo" alert never appears. That's probably because this is still asynchronous. Maybe "moo" is shown, but it doesn't wait for the user to respond before it returns and "cow" overwrites it. It's not a true replacement for the browser default `alert()`. – Mr. Lance E Sloan Feb 17 '14 at 14:58
1

@LS Which I have clearly stated in my ending paragraph. The example was to indicate how his current code could work. However, as we all know, the blocking behavior is something which is reserved for the browser, and can never be achieved using modal popups. – Kippie Feb 17 '14 at 15:57

score 1 · Answer 2 · answered Jan 12 '22 at 17:29

Updated @omar-fernando-pessoa answer to work with bootstrap 3.4.1

https://jsbin.com/monupudode/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modal = $('<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 id="myModalTitle" class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body&hellip;</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>');
    modal.find(".modal-body").text(arguments[0]);
    modal.modal('show');
  };
})();
    
    
    alert('moo');
    alert('cow');
  </script>
</body>
</html>

And updated for bootstrap 5.1.3

https://jsbin.com/mimexomela/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modaldiv = $('<div id="myModal" class="modal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 id="myModalTitle" class="modal-title">Modal title</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div><div class="modal-body"><p>Modal body text goes here.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button></div></div></div></div>');
    modaldiv.find(".modal-body").text(arguments[0]);
    modal = new bootstrap.Modal(modaldiv);
    modal.show();
  };
})();
    
    
    alert('moo');
    alert('cow');
  </script>
</body>
</html>

score 0 · Answer 3 · answered Aug 24 '18 at 20:22

Just complementing @Kippie.

http://jsbin.com/sadesukuli/2/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/javascript">
    (function() {
  var proxied = window.alert;
  window.alert = function() {
    modal = $('<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div>');
    modal.find(".modal-body").text(arguments[0]);
    modal.modal('show');
  };
})();


    alert('moo');
    alert('cow');
  </script>
</body>
</html>

"Your jsbin example shows a call for alert('moo') followed by alert('cow')"

My example show both 'moo' and 'cow'.

replace javascript alerts with modal

3 Answers3