Magento 2: phtml page adding buttons and pop up models

Question

Is it possible to add a few buttons and once the user clicks get pop up model which built by Magento 2? I want to allow the user to click a button and display a pop-up I was thinking to add 2/3 buttons and different content for each pop-up

Answer 1

I have a function which grabs all the details I need :

public function getDetails(){

    $ruleArray = $this->productCollectionFactory->create()->getData();
    $ruleArray = array_column($ruleArray,'rule_id');

    $ruleArray = array_chunk($ruleArray, 1);
        foreach( $ruleArray as $rule_id ) 
        {
        $currentTime = $this->_date->date()->format('Y-m-d H:i:s');

        $ruleId = $rule_id;
        $cData = $this->rule->create()->load($ruleId);
        $releaseDate = $cData->getFromDate();
        if ($releaseDate <= $currentTime){
            echo "<div class=id>" ."ID => ". implode(" ", $rule_id);"</div>";
            echo "<div class=code>" ." product=> "  .$cData->getName();"</div>";
            echo "<div class=description>" ." Description =>" .$cData->getDescription();"</div>";
        } 

        else {
            echo "<div class=coming-soon>" ." COMING SOON";"</div>";
        }

        }

}

in my phtml i am calling

<div class="test">
<h2>
<?php echo $block->getDetails(); ?>
</h2>
</div>

I get all the details but I want to show the only ID then if I click the id show popup with name and description is this possible?

Answer 2

By default, Magento 2 provides the Modal popup functionality.

Please check below code to open modal popup

<div>
    <button id="click-here">Click Here</button>
</div>

<div id="popup-modal-main" style="display:none;">
    <h1> Content for Popup </h1>
</div>

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

            var popup = modal(options, $('#popup-modal-main'));
            $("#click-here").on('click',function(){ 
                $("#popup-modal-main").modal("openModal");
            });
        }
    );
</script>

Hope it will work for you.