How to override filter dialog with my own dialog

Hi Team,

I have pivot table with filter icon. whenever user clicks on filter icon i need to show my own dialog component instead of default filter dialog.

I can see there is pivot.on('filteropen') method with a callback whenever the user clicks on filter icon callback is getting triggered , here I want to show the my custom dialog filter window not the default one.

pivot.on('filteropen', function (params) {

  showOutput('The filter is opened!');

});

jsfiddle link :  https://jsfiddle.net/flexmonster/drwyzj8o/