Sub-Entries: Adding new Entries on Entries field
The thing you are talking about is a Craft.BaseElementEditor

You can see a working example within all ElementIndex js files

Craft.createElementEditor(this.elementType, {
    hudTrigger: this.$newCategoryBtnGroup,
    elementType: 'craft\\elements\\Category',
    siteId: this.siteId,
    attributes: {
        groupId: groupId
    },
    onBeginLoading: $.proxy(function() {
        this.$newCategoryBtn.addClass('loading');
    }, this),
    onEndLoading: $.proxy(function() {
        this.$newCategoryBtn.removeClass('loading');
    }, this),
    onHideHud: $.proxy(function() {
        this.$newCategoryBtn.removeClass('inactive').text(newCategoryBtnText);
    }, this),
    onSaveElement: $.proxy(function(response) {
        // Make sure the right group is selected
        var groupSourceKey = 'group:' + groupId;

        if (this.sourceKey !== groupSourceKey) {
            this.selectSourceByKey(groupSourceKey);
        }

        this.selectElementAfterUpdate(response.id);
        this.updateElements();
    }, this)
});


So it could look like

var button = $('#yourButton');
Craft.createElementEditor('craft\\elements\\Entry', {
    hudTrigger: button ,
    elementType: 'craft\\elements\\Entry',
    siteId: this.siteId,
    attributes: {
        sectionId: 1, // &lt;-- insert your section id here
        typeId: 1 //&lt;-- important, insert your valid type id otherwise it won't work
    },
    onBeginLoading: $.proxy(function() {
        button.addClass('loading');
    }, this),
    onEndLoading: $.proxy(function() {
        button.removeClass('loading');
    }, this),
    onHideHud: $.proxy(function() {
        button.removeClass('inactive').text('New Entry');
    }, this),
    onSaveElement: $.proxy(function(response) {
        // insert the id of the saved element to hidden input
    }, this)
});