JS 26 - 进阶版互动视窗！不只警告、确认和提示，还有导览功能！

大家好！

我们今天要实作能和使用者互动的视窗。
我们进入今天的主题吧！

互动视窗

如果要和使用者互动，我们大多都会使用 alert、confirm 和 prompt 等函式。
但是，必须要等使用者回应後，才能执行後续的动作。

因此，今天我们要实作能同时等待回应和执行动作的互动视窗。

程序码

Felix.modal = function (method, p) {
    /* 如果 modal 存在则不执行 */
    if (Felix('#modal')[0]) return;
    let els = {};
    const modal = Felix('body').insert(`div#modal[data-method="${method}"]`);
    const container = Felix(modal).insert('article');
    /* 此处之後可不读 */
    !function () {
        if (!p.title && method !== 'guide') return;
        var header = Felix(container).insert('header');
        if (method === 'guide') els.close = Felix(header).insert('div');
        if (p.heading) els.title = Felix(header).insert('h6', p.heading);
        if (method === 'guide') els.next = Felix(header).insert('a[data-customized]');
    }();
    !function () {
        p.heading = typeof p.heading === 'undefined' || p.heading;
        if (!p.title && !p.heading && p.message && method === 'prompt') return;
        var main = Felix(container).insert('div#modal-main');
        if (p.title) Felix(main).insert('div', p.title);
        if (p.message) Felix(main).insert('p', p.message);
        if (method !== 'prompt') return;
        els.input = Felix(main).insert('input' + p.inputbox);
    }();
    !function () {
        if (!method) return;
        var footer = Felix(container).insert('footer');
        if (method === 'guide') return;
        els.ok = Felix(footer).insert('button.positive[type="button"]', 'OK');
        if (method === 'alert') return;
        els.cancel = Felix(footer).insert('button.negative[type="button"]', 'Cancel');
    }();
    /* 此处之前可不读 */
    return new Promise(function (resolve, reject) {
        var arr = [els.close, els.next, els.ok, els.cancel].filter(Boolean);
        arr.forEach(function (el) {
            el.addEventListener('click', clicked);
        });
        function clicked() {
            var that = this,
                check = method === 'prompt' ? els.input.validity.valid : true;
            if (!check && that === els.ok) return;
            arr.forEach(function (el) {
                el.removeEventListener('click', clicked);
            });
            modal.setAttribute('data-invisible', '');
            container.addEventListener('animationend', function () {
                if (that === els.ok || that === els.next)
                    resolve(method === 'prompt' ? els.input.value : true);
                else
                    reject(false);
                Felix(modal).remove();
            });
        }
    });
};

实测

Felix.modal('guide', {
    title: 'Hiya, Felix!'
});

直接观看范例

差不多也到尾声了。
如果对文章有任何疑问，也欢迎在下方提问和建议！
我是 Felix，我们明天再见！