0

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");
            }
        });
    }
);

1 Answer 1

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.