Magento 2: Modal opens only once

Question

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.

Answer 1

.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>