Hi everyone, this was my previous code before I used mdb. The principle is simple. I want to use a method to create different alerts which are triggered on an event. I would like to pass the content and the type to the alert.

Now I would like to create the same alert with the help of MDB which will be closed automatically.

HTML:

<div id="liveAlertPlaceholder" class="alert"></div>

JS-Code:

var alertPlaceholder = document.getElementById('liveAlertPlaceholder')

function alert(message, type)
{

    var wrapper = document.createElement('div')
        wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'

        alertPlaceholder.append(wrapper);
}


$('#example-btn').click(function () {
        alert('This is an example text.', 'primary');
});

I had tried to get a simple alert with the help of the documentation, but it didn't work.

HTML: Primary

    <div class="alert fade"
         id="alert-primary"
         role="alert"
         data-mdb-color="primary"
         data-mdb-position="top-right"
         data-mdb-stacking="true"
         data-mdb-width="535px"
         data-mdb-append-to-body="true"
         data-mdb-hidden="true"
         data-mdb-autohide="true"
         data-mdb-delay="2000">
        A simple primary alert
    </div>

JS:

const triggers = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark',
];
const basicInstances = [
    'alert-primary',
    'alert-secondary',
    'alert-success',
    'alert-danger',
    'alert-warning',
    'alert-info',
    'alert-light',
    'alert-dark',
];

triggers.forEach((trigger, index) => {
    let basicInstance = mdb.Alert.getInstance(document.getElementById(basicInstances[index]));
    document.getElementById(trigger).addEventListener('click', () => {
        basicInstance.show();
    });
});

$("#primary").click(function () {
    mdb.Alert.getInstance(document.getElementById('alert-primary')).show();
});