app\code\Test\CancelOrder\Controller\Order <?php

namespace Test\CancelOrder\Controller\Order;

use Magento\Sales\Controller\OrderInterface;
use Magento\Framework\App\Action\Context;
use Magento\Sales\Controller\AbstractController\OrderLoaderInterface;
use Magento\Framework\Registry;
use \Magento\Framework\Exception\NotFoundException;

class Cancel extends \Magento\Framework\App\Action\Action implements OrderInterface
{
    /**
     * @var \Magento\Sales\Api\OrderManagementInterface
     */
    protected $order;

    /**
     * @var \Magento\Sales\Controller\AbstractController\OrderLoaderInterface
     */
    protected $orderLoader;

    /**
     * @var \Magento\Framework\Registry
     */
    protected $registry;

    /**
     * Cancel constructor.
     * @param \Magento\Sales\Api\OrderManagementInterface $orderManagementInterface
     * @param Context $context
     */
    public function __construct(
        \Magento\Sales\Api\OrderManagementInterface $orderManagementInterface,
        OrderLoaderInterface $orderLoader,
        Registry $registry,
        \Magento\Sales\Model\OrderFactory $order,
        Context $context,
       ) {
        $this->_order = $orderManagementInterface;
        $this->orderLoader = $orderLoader;
        $this->registry = $registry;
        $this->order = $order;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultRedirect = $this->resultRedirectFactory->create();
        try {
            $orderId = $this->getRequest()->getParam('orderid');
            $orderObject = $this->order->create()->load($orderId);
            $comment = $this->getRequest()->getParam('comment');
            $orderObject->addStatusHistoryComment($comment)->setIsCustomerNotified(false)
                    ->setEntityName('order')
                    ->save();
            $this->_order->cancel($orderObject->getId());
        } catch (\Magento\Framework\Exception\LocalizedException $e) {
            if ($this->_objectManager->get('Magento\Checkout\Model\Session')->getUseNotice(true)) {
                $this->messageManager->addNotice($e->getMessage());
            } else {
                $this->messageManager->addError($e->getMessage());
            }
        }
        return $resultRedirect->setPath('*/*/history');
    }
}

Test\CancelOrder\view\frontend\templates\order\history.phtml

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php $_orders = $block->getOrders(); ?>
<?php echo $block->getChildHtml('info');?>
<?php if ($_orders && count($_orders)): ?>
    <div class="table-wrapper orders-history">
        <table class="data table table-order-items history" id="my-orders-table">
            <caption class="table-caption"><?php /* @escapeNotVerified */ echo __('Orders') ?></caption>
            <thead>
                <tr>
                    <th scope="col" class="col id"><?php /* @escapeNotVerified */ echo __('Order #') ?></th>
                    <th scope="col" class="col date"><?php /* @escapeNotVerified */ echo __('Date') ?></th>
                    <?php /* @noEscape */ echo $block->getChildHtml('extra.column.header');?>
                    <th scope="col" class="col shipping"><?php /* @escapeNotVerified */ echo __('Ship To') ?></th>
                    <th scope="col" class="col total"><?php /* @escapeNotVerified */ echo __('Order Total') ?></th>
                    <th scope="col" class="col status"><?php /* @escapeNotVerified */ echo __('Status') ?></th>
                    <th scope="col" class="col actions">&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($_orders as $_order): ?>
                    <tr>
                        <td data-th="<?php echo $block->escapeHtml(__('Order #')) ?>" class="col id"><?php /* @escapeNotVerified */ echo $_order->getRealOrderId() ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Date')) ?>" class="col date"><?php /* @escapeNotVerified */ echo $block->formatDate($_order->getCreatedAt()) ?></td>
                        <?php $extra = $block->getChildBlock('extra.container'); ?>
                        <?php if ($extra): ?>
                            <?php $extra->setOrder($_order); ?>
                            <?php /* @noEscape */ echo $extra->getChildHtml() ?>
                        <?php endif; ?>
                        <td data-th="<?php echo $block->escapeHtml(__('Ship To')) ?>" class="col shipping"><?php echo $_order->getShippingAddress() ? $block->escapeHtml($_order->getShippingAddress()->getName()) : '&nbsp;' ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Order Total')) ?>" class="col total"><?php /* @escapeNotVerified */ echo $_order->formatPrice($_order->getGrandTotal()) ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Status')) ?>" class="col status"><?php /* @escapeNotVerified */ echo $_order->getStatusLabel() ?></td>
                        <td data-th="<?php echo $block->escapeHtml(__('Actions')) ?>" class="col actions">
                            <a href="<?php /* @escapeNotVerified */ echo $block->getViewUrl($_order) ?>" class="action view">
                                <span><?php /* @escapeNotVerified */ echo __('View Order') ?></span>
                            </a>
                            <?php if ($_order->getStatusLabel()=='Pending') : ?>
                            <div>
                                <a href="#" class="action cancel orders" id="<?php echo $_order->getId().'_'.$_order->getRealOrderId(); ?>">
                                <span><?php /* @escapeNotVerified */ echo __('Cancel Order') ?></span>
                                </a>
                            </div>
                            <?php endif ?>
                            <?php if ($this->helper('Magento\Sales\Helper\Reorder')->canReorder($_order->getEntityId())) : ?>
                                <a href="#" data-post='<?php /* @escapeNotVerified */ echo
                                $this->helper(\Magento\Framework\Data\Helper\PostHelper::class)
                                    ->getPostData($block->getReorderUrl($_order))
                                ?>' class="action order">
                                    <span><?php /* @escapeNotVerified */ echo __('Reorder') ?></span>
                                </a>
                            <?php endif ?>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
    <?php if ($block->getPagerHtml()): ?>
        <div class="order-products-toolbar toolbar bottom"><?php echo $block->getPagerHtml(); ?></div>
    <?php endif ?>
<?php else: ?>
    <div class="message info empty"><span><?php /* @escapeNotVerified */ echo __('You have placed no orders.'); ?></span></div>
<?php endif ?>
<?php 
$currentUrl = \Magento\Framework\App\ObjectManager::getInstance()->get('Magento\Framework\UrlInterface');
$currentpage = $currentUrl->getCurrentUrl();
?>
<div id="popup-modal" style="display:none;">
<p class='orderinc' style="text-align:center;"></p>
   <form action="<?php echo $block->getUrl('sales/order/cancel');?>" name="comment_form" id="comment_form" method="post" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>"
      data-mage-init='{"validation":{}}'>
        <div class="field comment required">
           <!-- <label class="label" for="comment"><span style="font-weight:bold;"><?php //echo __('Comment') ?></span></label>-->
            <div class="control" style="margin-bottom: 40px;">
                <textarea name="comment" id="comment" placeholder="why do you want to cancel this order?" title="<?php /* @escapeNotVerified */ echo __('Comment') ?>" rows="3" cols="5"  class="input-text" data-validate="{required:true}"></textarea>
                <input type="hidden" name="orderid" id="orderid" value=<?php echo $_order->getId();?> /> <!-- passing order id to a controller-->
                <input type="hidden" name="currenturl" id="currenturl" value=<?php echo $currentpage;?> />
                
            </div>
        </div>
    </form>
</div>

<style type="text/css"> a.white-space-pre-line { white-space: pre-line; } .loader { border: 6px solid #f3f3f3; border-radius: 50%; border-top: 6px solid #3a3939; top: 60%; position: absolute; left: 50%; width: 50px; height: 50px; -webkit-animation: spin 1s linear infinite; /* Safari */ animation: spin 1s linear infinite; display: none; } /* Safari */ @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #loader-wrapper{ position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.1); z-index: 89898; cursor: pointer; } </style> <!--styles for loader -->

    <style type="text/css">
    .modal-title{text-align:center;}
    </style>
    
    <div id="loader-wrapper"></div>
    <div class="loader"></div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                //innerScroll: true,
                title: 'Are you sure to cancel the selected order ?',
                buttons: [{
                    text: $.mage.__('submit'), //submit button in pop-up
                    class: '',
                    click: function(data) {
                        
                        var form_data = jQuery("#comment_form").serialize();
                            $("#comment_form").validate(); 
                            if (!$("#comment_form").valid()) return false;//making text area as required field
                            $("#loader-wrapper").css("display", "block"); 
                            $(".loader").css("display", "block"); //displaying loader
                            jQuery.ajax({
                            url: "<?php  echo $block->getUrl('sales/order/cancel');?>",
                            type: 'POST',
                            data: form_data,
                            success: function(data) {
                            window.location.href = $("#currenturl").val(); //after posting data redirecting to currrent page
                            },
                            error: function(result) {
                                console.log('no response !');
                            }
                        });

                        this.closeModal();

                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));
            $(".orders").on('click', function() { //click on a cancel order link opening a pop-up
                var str = this.id;
                var orderVal = str.split("_");
                $("#orderid").val(orderVal[0]);
                $("#orderincrid").val(orderVal[1]);
                $("p.orderinc").text("ORDEER ID:#"+orderVal[1]);//showing orderid in pop-up
                $("#popup-modal").modal("openModal");
                return false;
            });
        }
    );
</script>

A modal popup is open with a text area,enter data in to that text area and how to submit that form and cancel the order in magento 2.

A modal popup is open with a text area, enter data into that text area and how to submit that form and cancel the order in Magento 2.