Javascript - confirmation dialog after form submission

Hey guys,
I am not a Javascript wiz so need some help with the following. I have a popup asking people to type in their email address. Right now the popup just closes after submission, which isn't a nice user experience. Ideally, the text bar and the submission button would disappear, and be replaced by a short comment such as "Thanks, we'll be in touch". On top of that, I'd like the popup to close automatically "N" seconds after submission.

Here are the codes:
HTML:

<div class="banner subscription-dialog">
    <span class="header">[[ headerText ]]</span>
    <span class="text">[[ bodyText ]]</span>
    <form>
        <input name="email" type="text" class="input" placeholder="email@example.com" pattern="^\S+@\S+\.\S+$" title="email address in form 'email@example.com'">
        <input type="submit" class="button" value="[[ buttonTitle ]]" />
    </form>
    <span class="lose"><span class="close-cross"></span></span>
</div>
<div class="banner-backdrop"></div>

Code (markup):

Javascript:

var self = this;
var showDelay = parseInt('[[ bannerShowDelayInMilliseconds ]]' || '0', 10);
setTimeout(function () {
    requestAnimationFrame(function () {
        if (!self.inPreview && "true" == "{{ 'true' if customer.email else 'false' }}") {
            return;
        }
        self.sdk.track('banner', getEventProperties('show', false));
        document.body.insertAdjacentHTML('beforeend', self.html);
        var banner = self.banner = document.querySelector('.subscription-dialog');
        self.backdrop = document.querySelector('.subscription-dialog + .banner-backdrop');
        banner.insertAdjacentHTML('afterbegin', '<style>' + self.style + '</style>');
        var form = banner.querySelector('form');
        form.onsubmit = function () {
            var eventProperties = getEventProperties('subscribe');
            var email = (form.email.value || '').toLowerCase();
            eventProperties.subscription_email = email;
            self.sdk.track('banner', eventProperties);
            if (validateEmail(email)) {
                self.sdk.update({
                    email: email
                });
                removeBanner();
            }
            return false;
        };
        var btnClose = banner.querySelector('.close');
        btnClose.onclick = function () {
            removeBanner();
            self.sdk.track('banner', getEventProperties('close'));
        };
    });
}, showDelay);

function getEventProperties(action, interactive) {
    return {
        action: action,
        banner_id: self.data.banner_id,
        banner_name: self.data.banner_name,
        banner_type: self.data.banner_type,
        variant_id: self.data.variant_id,
        variant_name: self.data.variant_name,
        interaction: interactive !== false ? true : false,
        location: window.location.href,
        path: window.location.pathname
    };
}

function removeBanner() {
    if (self.banner) {
        self.banner.parentNode.removeChild(self.banner);
    }
    if (self.backdrop) {
        self.backdrop.parentNode.removeChild(self.backdrop);
    }
}

function validateEmail(email) {
    return email && /^\S+@\S+\.\S+$/.test(email);
}
return {
    remove: removeBanner
};
[/code/

Code (markup):

 

Replace your removeBanner() in form.onsubmit with code that sets all desired labels and then call

setTimeout(removeBanner, 3000);

Code (JavaScript):

if you need a 3 second delay.

 

Hey thanks, but what about the "Thank You" message replacing the dialog box and the button?