Новый тег HTML5.2 — диалоговое окно

JavaScript HTML
Новый тег HTML5.2 — диалоговое окно

Новый тег HTML5.2 — диалоговое окно

исходный адрес

предисловие

Вслед за добавлением множества новых тегов в HTML5, в HTML5.2 появилось несколько современных тегов, включая тег

. Давайте узнаем об этом лейбле вместе с вами.

взять каштан

Давайте рассмотрим простейший пример↓:

Это исходный экологический стиль диалога, без каких-либо дополнительных стилей. Это согласуется в Chrome и Firefox, их соответствующие стили по умолчанию такие же, в основном одинаковые -

Хром: Firefox:

Уродливый? ! Если добавить подтяжку лица (удалить стиль по умолчанию), добавить красоты (css) и спецэффектов (js), получится очень сексуально 😄.

два свойства

open

Этот атрибут означает, что диалог виден, без него диалог будет скрыт до тех пор, пока вы не используете JavaScript для его отображения, по сути, добавьте к нему атрибут open.

returnValue

Используется для получения параметров, передаваемых при закрытии, см. ниже.

три пути

show()

showModal()

Оба метода имеют одинаковую точку открытия всплывающего окна, то есть они добавят атрибут открытия к элементу диалога. разница:

Единственное отличие состоит в том, что show() будет отображать диалог в соответствии с его позицией в DOM-потоке без маски, тогда как showModal() будет иметь маску и автоматически выполнять мониторинг клавиш, то есть нажимать клавишу esc, а всплывающее окно вверх окно будет закрыто.

В большинстве случаев мы будем использовать удобный метод showModal() вместо использования метода show().

close()

Закрывает всплывающее окно, удаляет открытое свойство и может содержать дополнительные данные в качестве параметра, переданное значение может быть получено с помощью dialog.returnValue.

два события

close

Запускается, когда модальное окно закрыто

cancel

Срабатывает при нажатии ESC для закрытия модального окна.

В объекте события event.target каждого события вы также можете увидеть параметр, переданный методом close(), то есть event.target. возвращаемое значение.

псевдоэлемент

::backdrop

Это диалоговый псевдоэлемент, который используется для установки стиля маски всплывающего окна.

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

Браузеры также имеют стили по умолчанию для фона. хром:

Еще один каштан

часть кода

methods: {
    onShow () {
        this.dialog.showModal();
    }
},

mounted () {
    this.dialog = this.$refs.dialog2;
    let closeBtn = this.dialog.querySelector('.js-close');
    let confirmBtn = this.dialog.querySelector('.js-confirm');
    let cancelBtn = this.dialog.querySelector('.js-cancel');

    //按esc关闭弹窗，同时会触发close事件
    this.dialog.addEventListener('cancel', e => {
        //不写这句也会关闭，这里主要是为了携带数据及演示监听cancel事件
        this.dialog.close('按esc关闭');
    });

    //关闭
    this.dialog.addEventListener('close', e => {
        let returnValue = this.dialog.returnValue;
        this.dialog.returnValue = '';
        returnValue !== '' && this.$notify({
            title: 'returnValue',
            message: returnValue
        });
    });

    //点击遮罩关闭，事件注册在dialog上
    this.dialog.addEventListener('click', (event) => {
        if (event.target === this.dialog) {
            //关闭，并携带数据
            this.dialog.close('点击了遮罩关闭');
        }
    });

    //点×关闭
    closeBtn.addEventListener('click', e => {
        this.dialog.close('点击了关闭');
    });

    //点确定
    confirmBtn.addEventListener('click', e => {
        this.dialog.close('点击了确定');
    });

    //点取消
    cancelBtn.addEventListener('click', e => {
        this.dialog.close('点击了取消');
    });
}

/*改变dialog样式*/
dialog {
    position: fixed;
    margin: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 300px;
    max-width: 80%;
    border: none;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}
dialog[open] {
    animation: slide-up 0.4s ease-out;
}
/*改变遮罩样式*/
dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translate(-50%, -40%);
    }
  
    100% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

polyfill

какие? ! Браузер не поддерживается? Телефон не отвечает? ! !

Дерево связано. вот одинdialog-polyfill, с небольшим дополнительным кодом вышеперечисленные функции все еще могут быть реализованы. Пока вводится js, добавьте предложение после всплывающего объекта в js:

dialogPolyfill.registerDialog(this.dialog);

Затем импортируйте его css (очень просто). Заинтересованные студенты могут попробовать это, и я не буду повторять это здесь ~ Неподдерживаемые браузеры попробуйте эту демонстрацию ↓:

последний каштан

использованная литература

Категории