Prompts native alert dialog.
AlipayJSBridge.call('alert', {
title: 'Hello',
message: 'How are you?',
button: 'OK'
}, function(e) {
alert(JSON.stringify(e));
});
<h1>Press the following buttons for alert and confirm</h1>
<a href="javascript:void(0)" class="btn alert">Click Alert</a>
<a href="javascript:void(0)" class="btn confirm">Click Confirm</a>
<script>
function ready(callback) {
// Invoke directly if JSBridge is already injected
if (window.AlipayJSBridge) {
callback && callback();
} else {
// Otherwise listen to `AlipayJSBridgeReady` event
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function() {
document.querySelector('.alert').addEventListener('click', function() {
AlipayJSBridge.call('alert', {
title: 'Hello',
message: 'How are you',
button: 'OK'
}, function(e) {
e && alert(JSON.stringify(e));
});
});
document.querySelector('.confirm').addEventListener('click', function() {
AlipayJSBridge.call('confirm', {
title: 'Hello',
message: 'Are you sure that you want to close this dialog?',
okButton: 'Yes',
cancelButton: 'No'
}, function(e) {
alert(JSON.stringify(e));
});
});
});
</script>
AlipayJSBridge.call('alert',{
title, message, button
}, fn)
Name | Type | Description | Mandatory | Default |
---|---|---|---|---|
title | string | Title of the dialog | N | ‘’ |
message | string | Message of the dialog | N | |
align | string | Message alignment, available options: left/center/right | N | iOS ‘center’, android ‘left’ |
button | string | Text of button | N | ‘OK’ |
fn | function | Callback function, invoked when button is clicked | N |
alert
is a non-blocking API which is different from window.alert
. If you execute it consecutively twice, i.e., prompts alert A then alert B, the eventually prompted dialog is alert B instead of A.