we can customize default global modals using the below sample code.
events: {
'click [data-action="Show-optional-text"]': 'Showoptionaltext'
},
Showoptionaltext: function (e) {
e.preventDefault();
// customize GlobalViewsConfirmationView
var orderApprovalDetailConfirmationView = new GlobalViewsConfirmationView({
callBackParameters: {
target: e.target,
context: this
},
title: 'Decline order',
body: '<a> Do you want to decline this order?</a> <br> <textarea> </textarea>',
specialdata: {},
autohide: true
});
this.options.application.getLayout().showInModal(orderApprovalDetailConfirmationView);
// Update the button text to "Confirm" using jquery
$(document).ready(function () {
$('.global-views-confirmation-confirm-button').text('Confirm');
});
},
Note:For displayinga text area in the body section u need to go to the corresponding theme template (global_views_confirmation.tpl) and make {{body}} to {{{body}}}
<div class="global-views-confirmation-body {{className}}">
{{#if showBodyMessage}}
{{{body}}}
{{else}}
<div data-view="ChildViewMessage"></div>
{{/if}}
</div>