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, // <-- insert your section id here
typeId: 1 //<-- 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)
});