Popup modal: To display Success message in popup model in magento 2

Question

I have created form in popup modal and it works successfully. After submitted a form it shows an alert. But I need success message instead of alert, in Popup itself after submitted a form. Please provide me a solution.

history.phtml

<div>
                                <a href="#" id="click" class="click-me" data-id="<?= $_order->getEntityId(); ?>" >Cancel</a>

                            </div>

                            <div id="popup-modal" style="display:none;">
                                <form action="<?php echo $block->getBaseUrl() . 'oxsales/index/index'; ?> " method="post" id="form-validate" enctype="multipart/form-data" autocomplete="off" data-mage-init='{"validation":{}}' data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">

                                    <label>Reason:</label><textarea id="reason" rows="4" cols="10" name="reason"></textarea>
                                </form>
                            </div>

                            <script>
                                require(
                                        [
                                            'jquery',
                                            'Magento_Ui/js/modal/modal'
                                        ],
                                        function (
                                                $,
                                                modal
                                                ) {
                                            var options = {
                                                type: 'popup',
                                                responsive: true,
                                                innerScroll: true,
                                                title: 'Reason for Cancelled the item',
                                                buttons: [{
                                                        text: $.mage.__('submit'),
                                                        class: '',
                                                        click: function () {
                                                            var form_data = jQuery("#reason").val();

                                                            var post_id = $('#click').data('id');
                                                            console.log(form_data);
                                                            jQuery.ajax({
                                                                url: "<?php echo $block->getBaseUrl() . 'oxsales/index/index'; ?>",
                                                                type: 'POST',
                                                                data: {'id': post_id, 'form_data': form_data},

                                                                success: function (data) {
                                                                    alert('success');

                                                                },
                                                                error: function (result) {
                                                                    alert("error");
                                                                }
                                                            });

                                                            this.closeModal();

                                                        }
                                                    }]
                                            };

                                            var popup = modal(options, $('#popup-modal'));
                                            $(".click-me").on('click', function () {
                                                $("#popup-modal").modal("openModal");
                                            });

                                        }
                                );
                            </script>

Answer 1

Inside of your ajax request

success: function (data) {
  alert('success');
}, error: function (result) {
  alert("error");                                                               
}

Replace alert with your implementation.

If you are using jQuery then appropriate solution would be:

1 - Add html message block somewhere

<p class="message" data-message></p>;

2 - In success/error callback add message inside of element

$('[data-message]').text(YOUR_MESSAGE);