Configure buttons
You can display the popup without any buttons for a clean, minimal interface, use predefined buttons for standard actions, or customize it by adding your own buttons with tailored text, style, and functionality to meet your specific needs.
By default, the popup is displayed without any buttons for a clean, minimal look. If you want some standard actions you can use the following predefined buttons:
okfor confirmationcancelto dismiss the popupclosefor closing the popup without actionsetfor saving or applying changes
You can add custom buttons with tailored text, style, and functionality if you have more specific needs.
Demo
{
buttons: []
}{
buttons: ['ok', 'cancel']
}{
buttons: [{
text: 'Custom',
handler: function () {
mobiscroll.toast({
message: 'Custom button clicked'
});
}
}]
}Hi there!
This is the default with no buttons.
Hi again!
This is a popup with predefined buttons.
Hi again!
This is a popup with a custom button.
JSHTMLCSS
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
var noBtnPopup = mobiscroll.popup('#demo-popup-no-btn', {
display: 'center',
});
var predefinedBtnPopup = mobiscroll.popup('#demo-popup-predefined-btn', {
display: 'center',
buttons: ['ok', 'cancel'],
});
var customBtnPopup = mobiscroll.popup('#demo-popup-custom-btn', {
display: 'center',
buttons: [
{
text: 'Custom',
handler: function () {
mobiscroll.toast({
message: 'Custom button clicked',
});
},
},
],
});
document.getElementById('demo-no-buttons-btn').addEventListener('click', function () {
noBtnPopup.open();
});
document.getElementById('demo-predefined-btn').addEventListener('click', function () {
predefinedBtnPopup.open();
});
document.getElementById('demo-custom-btn').addEventListener('click', function () {
customBtnPopup.open();
});
<div class="mbsc-align-center">
<div class="mbsc-note">Customize popup buttons depending on your context.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<button mbsc-button id="demo-no-buttons-btn">No Buttons</button>
<button mbsc-button id="demo-predefined-btn">Predefined buttons</button>
<button mbsc-button id="demo-custom-btn">Custom button</button>
</div>
</div>
<div style="display: none;">
<div id="demo-popup-no-btn">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi there!</h3>
<p class="md-text-center">This is the default with no buttons.</p>
</div>
</div>
<div id="demo-popup-predefined-btn">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with predefined buttons.</p>
</div>
</div>
<div id="demo-popup-custom-btn">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with a custom button.</p>
</div>
</div>
<div>
/* style */