Alert, confirm & prompt
Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.
Demo
Alert
Alerts have a title, message and a confirmation button.
mobiscroll.alert({
title: 'Cellular Data is Turned Off for "Safari"',
message: 'You can turn on cellular data for this app in Settings.'
});Confirm
Besides a title and message, the confrim dialog supports a customizable okText and cancelText.
mobiscroll.confirm({
title: 'Use location service?',
message: 'Help apps determine the location. This means sending anonymous location data, even when no apps are running.',
okText: 'Agree',
cancelText: 'Disagree'
});Prompt
Adding to the title and message, the prompt provides a focused way of capturing user input. With the inputType, passwords can be entered and the placeholder provides a helper text.
mobiscroll.prompt({
title: 'Sign in to iTunes Store',
message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
placeholder: 'Password',
inputType: 'password'
});JSHTML
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
document.getElementById('show-alert').addEventListener('click', function () {
mobiscroll.alert({
title: 'Cellular Data is Turned Off for "Safari"',
message: 'You can turn on cellular data for this app in Settings.',
});
});
document.getElementById('show-confirm').addEventListener('click', function () {
mobiscroll.confirm({
title: 'Use location service?',
message: 'Help apps determine location. This means sending anonymous location data, even when no apps are running.',
okText: 'Agree',
cancelText: 'Disagree',
});
});
document.getElementById('show-prompt').addEventListener('click', function () {
mobiscroll.prompt({
title: 'Sign in to iTunes Store',
message: 'Enter the Apple ID password for "hello@mobiscroll.com".',
placeholder: 'Password',
inputType: 'password',
});
});
<button mbsc-button id="show-alert">Alert</button>
<button mbsc-button id="show-confirm">Confirm</button>
<button mbsc-button id="show-prompt">Prompt</button>