How to create popup modal in magento 2?

How to create Popup Modal using Javascript in Magento 2?

Create a .phtml template file with the given content to make POPUP using Magento 2,

<div class="main-block">
    <div class="content">
    	<a href="javascript:void(0)" id="chart"><?php echo __('Chart Link');?></a>
    </div>
    <!-- Your Popup content with main div display none -->
	<div id="popup-chart" style="display:none;">
	    YOUR POPUP CONTENT GOES HERE
	</div>
</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal',
            'domReady!'
        ],
        function($, modal) {
            $(function() {
            	$("body").on("click", "#chart", function(e) {
                    var options = {
                        type: 'popup',
                        responsive: true,
                        innerScroll: true,
                        buttons: false
                    };
                    var popup = modal(options, $('#popup-chart'));
                    $("#popup-chart").modal("openModal");
                }
            });
        }
    );
</script>

In the above template file, we can show popup based on click on chart link. When click on the chart link defined in our DOM element popup modal will be displayed.

Call Magento_Ui/js/modal/modal object in your require dependency.

There are many default options are available for modal.js file.
Different types of optios you can pass as per your requirement in above options object.

List of default options for a modal popup, if you want to override default value set options value in your custom template in the options object.

    type: 'popup',
    title: '',
    subTitle: '',
    modalClass: '',
    focus: '[data-role="closeBtn"]',
    autoOpen: false,
    clickableOverlay: true,
    popupTpl: popupTpl,
    slideTpl: slideTpl,
    customTpl: customTpl,
    modalVisibleClass: '_show',
    parentModalClass: '_has-modal',
    innerScrollClass: '_inner-scroll',
    responsive: false,
    innerScroll: false,
    modalTitle: '[data-role="title"]',
    modalSubTitle: '[data-role="subTitle"]',
    modalBlock: '[data-role="modal"]',
    modalCloseBtn: '[data-role="closeBtn"]',
    modalContent: '[data-role="content"]',
    modalAction: '[data-role="action"]',
    focusableScope: '[data-role="focusable-scope"]',
    focusableStart: '[data-role="focusable-start"]',
    focusableEnd: '[data-role="focusable-end"]',
    appendTo: 'body',
    wrapperClass: 'modals-wrapper',
    overlayClass: 'modals-overlay',
    responsiveClass: 'modal-slide',
    trigger: '',
    modalLeftMargin: 45,
    closeText: $.mage.__('Close'),
    buttons: [{
        text: $.mage.__('Ok'),
        class: '',
        attr: {},

        /**
         * Default action on button click
         */
        click: function (event) {
            this.closeModal(event);
        }
    }],