alert 警告框

优质
小牛编辑
127浏览
2023-12-01
Since 8.1

alert

alert对话框的native实现

使用方法

AlipayJSBridge.call('alert', {
  title: '亲',
  message: '你好',
  button: '确定'
}, function(e) {
  alert(JSON.stringify(e));
});

代码演示

alert和confirm

<h1>点击以下按钮看不同效果</h1>
<a href="javascript:void(0)" class="btn alert">点击Alert</a>
<a href="javascript:void(0)" class="btn confirm">点击Confirm</a>

<script>
function ready(callback) {
  // 如果jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 如果没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function() {
  document.querySelector('.alert').addEventListener('click', function() {
    AlipayJSBridge.call('alert', {
      title: '亲',
      message: '你好',
      button: '确定'
    }, function(e) {
      alert(JSON.stringify(e));
    });
  });

  document.querySelector('.confirm').addEventListener('click', function() {
    AlipayJSBridge.call('confirm', {
      title: '亲',
      message: '确定要退出吗?',
      okButton: '是',
      cancelButton: '否'
    }, function(e) {
      alert(JSON.stringify(e));
    });
  });
});
</script>
查看演示 扫码查看 用支付宝扫码运行

API

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

入参

名称类型描述必选默认值版本
titlestringalert框标题N‘’
messagestringalert框文本N
alignstringmessage对齐方式,可用枚举left/center/rightNiOS ‘center’, android ‘left’10.0.5
buttonstring按钮文字N‘确定’
fnfunction回调函数,当点击button后被调用N

使用注意

  • alert这个api不像window.alert,它不是阻塞式的,也就是说先后弹2个的话,最后看到的是后弹的那个。