Display message by popup in magento 2

Question

I have a module to download a file on S3 by magento 2. When I click button download, it will down a file csv, now I want if this file does not exist so display a popup message on screen by 1 notification sentence and 1 button OK. How can I do that? Help me!!! Tks !!!

Answer 1

You need to call showcartPopup(msg) this function to show a popup with a message when file not found. You just need to pass a message with a function. you can update class and function name according to you. I used this code for cart product success/failed message show

<div id="popup-modal" style="display:none;">
    <h2 id="cartmessagecustome" ></h2>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

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

        }
    );
    function showcartPopup(msg){
        require([ 'jquery', 'jquery/ui'], function($){
            $('#cartmessagecustome').empty();
            $('#cartmessagecustome').append(msg);
            $('#popup-modal').click();
         });
    }

</script>

Answer 2

You need to check csv file is exist or not into if condition And for call Popup use this code init.

 if (file exist){

        //ADD your Doownload Logic

 } else {

?>
 <div id='popup-modal'>
        <h1> Hi I'm here.... </h1>
    </div>
    <script>
        require(
            [
                'jquery',
                'Magento_Ui/js/modal/modal'
            ],
            function(
                $,
                modal
            ) {
                var options = {
                    type: 'popup',
                    responsive: true,
                    innerScroll: true,
                    title: 'popup modal title',
                    buttons: [{
                        text: $.mage.__('Continue'),
                        class: '',
                        click: function () {
                            this.closeModal();
                        }
                    }]
                };
    
                var popup = modal(options, $('#popup-modal'));
    
                $('#popup-modal').modal('openModal');
            }
        );
    </script>
<?php
 
 }

?>