Magento 2 Unable to Pop Up Modal by JS – Troubleshooting

magento2

I created a phtml for popup under the custom module folder, but it has no modal pop up while clicking. Anyone can help? thanks.

popup.phtml

<div id="modal-content" style="display:none;">
    <form id="popupform">
        <label for="fname">Name:</label> <br>
        <input id="fname" name="fname" type="text"><br>
        <label for="femail">Email:</label> <br>
        <input id="femail" name="femail" type="email"><br>
        <label for="fmessage">Message:</label> <br>
        <input id="fmessage" name="fmessage" type="text"><br>
        <label for="fproduct_name">Product Name:</label> <br>
        <input id="fproduct_name" name="fproduct_name" type="text"><br>
        <button type="submit">Submit</button>
    </form>
</div>

The js in phtml

 <script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal',
        'domReady!'
    ],
    function($, modal) {
        $(function() {
            $("#chart").on("click", function() {
                var options = {
                    type: 'popup',
                    responsive: true,
                    innerScroll: true,
                    buttons: false
                };
                var popup = modal(options, $('#modal-content'));
                popup.modal("openModal");
            }
        });
    }
);

Best Answer

Try this code

<div id="modal-content">
    <form id="popupform">
        <label for="fname">Name:</label> <br>
        <input id="fname" name="fname" type="text"><br>
        <label for="femail">Email:</label> <br>
        <input id="femail" name="femail" type="email"><br>
        <label for="fmessage">Message:</label> <br>
        <input id="fmessage" name="fmessage" type="text"><br>
        <label for="fproduct_name">Product Name:</label> <br>
        <input id="fproduct_name" name="fproduct_name" type="text"><br>
        <button type="submit">Submit</button>
    </form>
</div>

<button id="chart">TEST BUTTON</button>

<script type="text/javascript">
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function($,modal) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            title: 'Popup',
            buttons: []
        };

        $( "#chart" ).click(function() {
            var popup = modal(options, $('#modal-content'));
            $('#modal-content').modal('openModal');
        });
    }
);
</script>
Related Topic