Button Event to Display Dialog – based on custom java script function

Page Structure – HTML Code

<oj-dialog style="display:none" dialog-title="Dialog" id="d1">
  <div slot="body">
    <div class="oj-flex"></div>
  </div>
   <div slot="body">
      <p>Are you sure you want to navigate?</p>
    </div>
  <div slot="footer">
   
      <oj-button id="confirmYes" on-oj-action="[[$listeners.confirmYesOjAction2]]" >Yes</oj-button>
      <oj-button id="confirmNo" on-oj-action="[[$listeners.confirmNoOjAction]]">No</oj-button>
       
  </div>
</oj-dialog>


<div class="oj-flex">
  <div class="oj-flex-item oj-sm-12 oj-md-2">
    <oj-button on-oj-action="[[$listeners.ojButtonOjAction]]">Open Dialog</oj-button>
  </div>
</div>

JavaScript Code

define([], function() {
  'use strict';

  var PageModule = function PageModule() {};

  /**
   *
   * @param {String} arg1
   * @return {String}
   */
  PageModule.prototype.openDialogFun = function () {
  document.getElementById('d1').open();
  console.log("user clicked on Open Diallog to open the dialog");
  };

  PageModule.prototype.closeDialogYes = function () {
  document.getElementById('d1').close();
  console.log("user clicked on Yes button");
  };
  
  PageModule.prototype.closeDialogNo = function () {
  document.getElementById('d1').close();
  console.log("user clicked on No button");
  };
  
 
  return PageModule;
});

Action Chain Event Binding

Final Page