Magento 2 How to close Dropdown Dialog on click

Question

I have added dropdown dialog using bellow code

<div class="block block-demo-dialog empty"
     data-role="dropdownDialog"
     data-mage-init='{"dropdownDialog":{
        "appendTo":"[data-block=demo-dialog]",
        "triggerTarget":".showdialog",
        "timeout": "2000",
        "closeOnMouseLeave": false,
        "closeOnEscape": true,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":[{"text":"x","class":"close-dialog-popup","click":"close"}]}}'>

using above code dialog popup, not opening ... if I removed buttons content

("buttons":[{"text":"x","class":"close-dialog-popup","click":"close"}])

then all working but I want Close Button using data-mage-init anyone has an idea how to use buttons with data-mage-init.

Answer 1

Try like that:

<div class="block block-demo-dialog empty"
     data-role="dropdownDialog"
     data-mage-init='{"dropdownDialog":{
        "appendTo":"[data-block=demo-dialog]",
        "triggerTarget":".showdialog",
        "timeout": "2000",
        "closeOnMouseLeave": false,
        "closeOnEscape": true,
        "triggerClass":"active",
        "parentClass":"active",
        "buttons":[{text: $.mage.__('x'),click: function () {$(this).dropdownDialog("close");}}]}}'>