0

Here is my HTML and JS:

<div id="mybutton" class="button">
    click
</div>

<div id="testcontent">
    blah
</div>


<script>
    // <![CDATA[
    require([
        'jquery',
        'jquery/ui',
        'Magento_Ui/js/modal/modal'
    ], function ($) {
        $(function () {
            $('#mybutton').on('click', function(){
                $('#testcontent').modal({
                    title: 'My Title',
                    autoOpen: true
                });
            });
        });
    });
    // ]]>
</script>

The Problem is: the modal works only once. After closing it the button does not spawn a second modal.

3
  • Set "autoOpen: true" To "autoOpen: false" Jun 18, 2018 at 10:03
  • Doesn't change anything.
    – omsta
    Jun 18, 2018 at 11:05
  • Have you got any error in console? Jun 18, 2018 at 11:16

1 Answer 1

2

.modal({...options}) will only set up the modal (and auto open if autoOpen: true). You should instruct the modal to open by passing "openModal" to it (.modal("openModal")).

Try this code:

<div id="mybutton" class="button">
    click
</div>

<div id="testcontent" style="display:none;">
    blah
</div>

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            modalClass: 'mybuttont_modal',
            title: 'testcontent'
        };

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

    }
);
</script>
2
  • Thx, that did it.
    – omsta
    Jun 18, 2018 at 11:35
  • 1
    @Prashant next time also add an explanation of what your code is doing differently and why it is that way.
    – 7ochem
    Jun 18, 2018 at 12:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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