All Products
Search
Document Center

Alert

Last Updated: Feb 10, 2021

This interface is used for native implementation of alert box.

Use alert interface

  1. AlipayJSBridge.call('alert', {
  2. title: 'Dear',
  3. message: 'Hello',
  4. button: 'Confirm'
  5. }, function(e) {
  6. alert(JSON.stringify(e));
  7. });

Code sample

  • alert and confirm:
    1. <h1>Click the buttons below to see the different effects</h1>
    2. <a href="javascript:void(0)" class="btn alert">Click Alert</a>
    3. <a href="javascript:void(0)" class="btn confirm">Click Confirm</a>
    4. <script>
    5. function ready(callback) {
    6. // Call directly if JSBridge has been injected
    7. if (window.AlipayJSBridge) {
    8. callback && callback();
    9. } else {
    10. // Monitor the injected events if JSBridge hasn't been injected
    11. document.addEventListener('AlipayJSBridgeReady', callback, false);
    12. }
    13. }
    14. ready(function() {
    15. document.querySelector('.alert').addEventListener('click', function() {
    16. AlipayJSBridge.call('alert', {
    17. title: 'Dear',
    18. message: 'Hello',
    19. button: 'Confirm'
    20. }, function(e) {
    21. alert(JSON.stringify(e));
    22. });
    23. });
    24. document.querySelector('.confirm').addEventListener('click', function() {
    25. AlipayJSBridge.call('confirm', {
    26. title: 'Dear',
    27. message: 'Are you sure to exit?',
    28. okButton: 'Yes',
    29. cancelButton: 'No'
    30. }, function(e) {
    31. alert(JSON.stringify(e));
    32. });
    33. });
    34. });
    35. </script>

API

  1. AlipayJSBridge.call('alert',{
  2. title, message, button
  3. }, fn)

Input parameters

Name Type Description Required Default value Version
title string Title of alert box N ‘’
message string Text of alert box N
align string Alignment of message with left/center/right enumeration available N ‘center’ for iOS, ‘left’ for Android 10.0.5
button string Button text N ‘Confirm’
fn function Callback function, which will be called after clicking button. N

Attentions

  • Unlike window.alert, alert is not a blocking interface. It means that if two alert boxes pop up successively, the one you see finally is the latter one.