Скрытие модального бутстрапа с простым javascript в машинописном тексте - PullRequest
Новая
       18

Скрытие модального бутстрапа с простым javascript в машинописном тексте

0 голосов
/ 30 апреля 2018

Я использую Aurelia с начальной загрузкой, чтобы показать модал, чтобы запросить подтверждение, чтобы очистить детали формы. Для этого я создал плункер ссылка . Как я могу скрыть модальный бутстрап, не используя JQuery, который предоставляет бутстрап, чтобы вызвать событие для закрытия модального интервала? Я попытался ниже, чтобы скрыть модал, который работает. Но нарушает модальный режим, когда вы хотите показать его снова. 

document.getElementById("confirmationRequired").style.display = 'none';

Когда я пытаюсь нажать на кнопку «Очистить btn», я получаю сообщение об ошибке ниже.

enter image description here

1 Ответ

0 голосов
/ 30 апреля 2018

Я понимаю (и разделяю) ваше предпочтение стараться избегать JQuery там, где это возможно, но когда вы работаете с компонентом JQuery, на этом корабле уже что-то приплыло ..: -)

Чтобы ответить на ваш вопрос (и продемонстрировать, почему при работе с JQuery трудно избежать JQuery), есть два способа скрыть его с помощью «обычного JS»:

1. Скопируйте код из Modal.hide начальной загрузки () :

Как вы можете видеть, он делает гораздо больше вещей, чем просто применение стиля hide. Вот почему это не работает. 

if (event) {
  event.preventDefault()
}

if (this._isTransitioning || !this._isShown) {
  return
}

const hideEvent = $.Event(Event.HIDE)

$(this._element).trigger(hideEvent)

if (!this._isShown || hideEvent.isDefaultPrevented()) {
  return
}

this._isShown = false
const transition = $(this._element).hasClass(ClassName.FADE)

if (transition) {
  this._isTransitioning = true
}

this._setEscapeEvent()
this._setResizeEvent()

$(document).off(Event.FOCUSIN)

$(this._element).removeClass(ClassName.SHOW)

$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)


if (transition) {
  const transitionDuration  = Util.getTransitionDurationFromElement(this._element)

  $(this._element)
    .one(Util.TRANSITION_END, (event) => this._hideModal(event))
    .emulateTransitionEnd(transitionDuration)
} else {
  this._hideModal()
}

Я пробовал подобные вещи раньше и обычно заканчивал тем, что бросил вечер работы (вычисляя и связывая все зависимости) после того, как пришел к выводу, что я должен просто позволить библиотеке справиться с этим.

Это не значит, что это пустая трата времени. Это поможет вам лучше понять, как работают эти библиотеки, и в конечном итоге сэкономит время в долгосрочной перспективе, потому что API будет меньше сюрпризов для вас.

2. Вручную вызвать Modal.hide()

Это включает в себя поиск правильного jQuery объекта в элементе, получение нужного вам экземпляра объекта и последующий вызов соответствующего метода для него. Быстрый и грязный способ сделать это: 

const el = document.getElementById("confirmationRequired");
const modal = Object.getOwnPropertyNames(el)
    .filter(n => n.startsWith("jQuery"))
    .map(n => e[n]["bs.modal"])
    .find(j => j !== undefined);

modal.hide();

Или ..

Я бы просто использовал jQuery, чтобы сделать то же самое, но с меньшим количеством кода и более надежно.

Как уже отмечал Джесси, aurelia-dialog - это путь, если вы хотите избежать JQuery. Это требует обучения, но это очень аккуратная библиотека, как только вы ее освоите.

Кто-то может поспорить: почему бы просто не прокрутить свою собственную модальную логику, используя только CSS из начальной загрузки для стилизации диалога? Модал - это две простые части:

  • Фиксированный заполняющий экран элемент с оттенком и положительным z-индексом, который делает остальную часть приложения недоступной для клика, когда модал активен. Просто показать / скрыть это с помощью CSS.

  • Элемент простой формы, фиксированный и центрированный, с более высоким z-индексом, чем заполнитель экрана. Вы можете сделать это пользовательским элементом и сделать его по-настоящему простым, позвольте ему общаться через EventAggregator, чтобы вам не приходилось совершать колдовство с тесно связанными привязками.

Добавьте несколько обработчиков событий, таких как esc, и щелкните за пределами модального окна в качестве альтернативы, чтобы закрыть его, и вы получите золотую медаль.

...