create widget with dialog box and insert dialog element values in widget templet editable area !!

I am creating custom widget with editable fields in templet. I want to add a dialog box it's open template editable fields value, when i edit fields value in dialog box and click on "ok" button then updated value should be update in template's editable fields. 

like i am using widget:-

CKEDITOR.plugins.add( 'simplebox', {
    requires: 'widget',

    icons: 'simplebox',

    init: function( editor ) {
        editor.widgets.add( 'simplebox', {

            button: 'Create a simple box',

            template:
                '<div class="simplebox">' +
                    '<h2 class="simplebox-title">Title goes here..</h2>' +
           
                '</div>',

            editables: {
                title: {
                    selector: '.simplebox-title',
                    allowedContent: 'br strong em'
                },
             },

            upcast: function( element ) {
                return element.name == 'div' && element.hasClass( 'simplebox' );
            }
        } );
    }
} );

i want to show a popup box which has a text container which has template editable value in this example which is "Title goes here..." . i added it and click ok it should update "Title goes here..." content in templet editable field.

Please help me !

Thanks in advance