Как заставить всплывающее окно Bootstrap 5.2 срабатывать в операторе «если»?
Я использую всплывающие окна как часть процесса проверки ввода. У меня есть идея, но я не могу понять синтаксис, как заставить это работать.
https://jsbin.com/sufitelodo/1/edit?html,js,output
Этот JSBin является его основой.
Я не знаю, как написать HTML для скрытого всплывающего окна Bootstrap 5.2, которое появляется только при вызове в операторе if. Чтобы запустить это, введите число 0 на вход A и любое число на вход B и снова то же число на вход C. Первая ошибка должна заключаться в том, что вход A = 0, а затем вы меняете это на любой ненулевой, а затем второй ошибка должна произойти, когда вы попытаетесь отправить. Я хотел бы перейти от окон предупреждений к всплывающим окнам.
const popoverTriggerList = [].slice.call(
document.querySelectorAll('[data-bs-toggle = "popover"]')
);
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, { html: true });
});
document.getElementById("button").addEventListener("click", testMe);
function testMe() {
let inputA = parseFloat(document.getElementById("aInput").value);
let inputB = parseFloat(document.getElementById("bInput").value);
let inputC = parseFloat(document.getElementById("cInput").value);
let popoverTest1 = document.getElementById("popoverTest1");
let popoverTest2 = document.getElementById("popoverTest2");
if (inputA === 0) {
// Make popoverTest1 come up here
//alert("This is when popoverTest1 should fire");
bootstrap.Popover.getOrCreateInstance('#popoverTest1').show()
return false;
} else if (inputB === inputC) {
// Make popoverTest2 come up here
//alert("This is when popoverTest2 should fire");
bootstrap.Popover.getOrCreateInstance('#popoverTest2').show()
return false;
}
}
document.getElementById("close1").addEventListener("click", closePop);
function closePop () {
bootstrap.Popover.getInstance('#popoverTest1').hide();
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">
<label for = "aInput">A Input</label>
<input type = "number" id = "aInput">
<span id = "popoverTest1"
data-bs-container = "body"
data-bs-toggle = "popover"
data-bs-trigger = "manual"
data-bs-content = "Top popover"
data-bs-title='This is zero <a href = "" id = "close1">x</a>'
data-bs-content='Change it to something non-zero'>
</span>
<br><br>
<label for = "bInput">B Input</label>
<input type = "number" id = "bInput">
<span id = "popoverTest2"
data-bs-container = "body"
data-bs-toggle = "popover"
data-bs-trigger = "manual"
data-bs-content = "Top popover"
data-bs-title = "This is the same as Input C"
data-bs-content = "Change it so it's not the same as Input C">
</span>
<br> <br>
<label for = "cInput">C Input</label>
<input type = "number" id = "cInput">
<button type = "button" class = "btn btn-warning" id = "button">Hit Me</button>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>Итак, вместо предупреждений я бы хотел более чистое всплывающее окно от Bootstrap, но синтаксис и их работа (даже после попытки расшифровать документацию) не на моей стороне. Затем, после открытия всплывающего окна, его нужно снова закрыть.
Я пробовал data-bs-trigger = "focus", но, похоже, это не позволило закрыть.
Спасибо за вашу помощь в этом.
*** Изменить. Я обновил код, чтобы можно было использовать только Vanilla, но есть ошибка с использованием кнопки закрытия... Кажется, я не могу избавиться от всплывающего окна.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я включил все необходимые активы, как описано в документации здесь (для версии 5.2):
https://getbootstrap.com/docs/5.2/getting-started/introduction/
И использовал точный фрагмент кода, показанный здесь, для инициализации всех всплывающих окон:
https://getbootstrap.com/docs/5.2/components/popovers/
Стратегия получения экземпляра всплывающего окна с помощью селектора CSS:
const popover1 = bootstrap.Popover.getOrCreateInstance('#popoverTest1');
Методы, которые вам интересно вызывать при отображении и скрытии соответственно:
popover1.show();
popover1.hide();
Единственное действие, которое я добавил к вашей логике, — это скрытие всех всплывающих окон при нажатии кнопки перед отображением нового, если это так.
Затем я также добавил стратегию для обработки щелчка, которая будет скрывать все видимые всплывающие окна в случае их отображения. Bootstrap полагался на атрибут data-bs-trigger, установленный как focus вместо manual, но это подразумевает, что всплывающее окно будет запускаться посредством взаимодействия с пользователем, а не явным вызовом метода .show() вручную. Итак, поскольку мы показываем всплывающие окна через .show(), мы обречены также на реализацию части .hide(), которая в данном случае обрабатывается обработчиком события клика на объекте окна.
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle = "popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
document.getElementById("button").addEventListener("click", testMe);
window.addEventListener('click', (event)=>{
const popoverTest1 = bootstrap.Popover.getOrCreateInstance('#popoverTest1');
const popoverTest2 = bootstrap.Popover.getOrCreateInstance('#popoverTest2');
popoverTest1.hide();
popoverTest2.hide();
});
function testMe(event) {
event.stopPropagation();
const inputA = parseFloat(document.getElementById("aInput").value);
const inputB = parseFloat(document.getElementById("bInput").value);
const inputC = parseFloat(document.getElementById("cInput").value);
const popoverTest1 = bootstrap.Popover.getOrCreateInstance('#popoverTest1');
const popoverTest2 = bootstrap.Popover.getOrCreateInstance('#popoverTest2');
popoverTest1.hide();
popoverTest2.hide();
if (inputA === 0) {
popoverTest1.show();
} else if (inputB === inputC) {
popoverTest2.show();
}
}<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link
href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel = "stylesheet"
integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin = "anonymous">
</head>
<body>
<label for = "aInput">A Input</label>
<input type = "number" id = "aInput">
<!-- popoverTest1 -->
<span
id = "popoverTest1"
data-bs-container = "body"
data-bs-toggle = "popover"
data-bs-trigger = "manual"
data-bs-title = "This is zero"
data-bs-content = "Change it to something non-zero"></span>
<br><br>
<label for = "bInput">B Input</label>
<input type = "number" id = "bInput">
<!-- popoverTest2 -->
<span
id = "popoverTest2"
data-bs-container = "body"
data-bs-toggle = "popover"
data-bs-trigger = "manual"
data-bs-title = "This is the same as Input C"
data-bs-content = "Change it so it's not the same as Input C"></span>
<br><br>
<label for = "cInput">C Input</label>
<input type = "number" id = "cInput">
<button type = "button" class = "btn btn-warning" id = "button">Hit Me</button>
<script
src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin = "anonymous"></script>
</body>
</html>Я пробовал это раньше: popoverTest1.popover('show'); (используя те же переменные), но это не сработало.
код, которым я поделился ранее, работал для меня, но он не полностью соответствовал используемым версиям. Я только что обновил ответ, чтобы включить именно то, что требуется для работы с загрузкой 5.2. В качестве примечания: для всплывающих окон требуется библиотека popper.js, которая в данном случае включена в bootstrap.bundle.min.js.
Я использую полный пакет на своем сайте и JSBin, единственное, с чем у меня возникают проблемы, это то, что всплывающее окно не закрывается при следующем щелчке. Я изменил data-bs-trigger = "manual" на data-bs-trigger = "focus", но это не сработало.
это, вероятно, потому, что всплывающее окно должно быть вызвано действием пользователя. Вот почему атрибут называется триггером, и его значение должно быть ручным или фокусным (или чем-то еще). Журналы для закрытия всплывающего окна основаны на том факте, что первый щелчок вызвал его появление. Поскольку эта стратегия не может работать с использованием .show-подхода, я реализовал свою .hide часть истории, добавив прослушиватель для события щелчка на объекте окна.
* логика закрытия всплывающего окна зависит от... (исправление типа, который я сделал ранее) ... может быть, этот комментарий был слишком большим ... в любом случае, теперь код работает, как ожидалось. Я только добавлю, что в любом случае у закрываемого всплывающего окна были дополнительные требования, такие как использование элемента привязки и tabindex, поэтому использование hide() в этом случае было гораздо более подходящим в любом случае.
Спасибо... Собираюсь работать по его методу, похоже, он удовлетворит мои потребности. Я ценю вашу помощь здесь.
Давайте продолжим обсуждение в чате.
Вам нужно получить экземпляр соответствующего Popover и показать его.
function testMe() {
let inputA = parseFloat(document.getElementById("aInput").value);
let inputB = parseFloat(document.getElementById("bInput").value);
let inputC = parseFloat(document.getElementById("cInput").value);
let popoverTest1 = document.getElementById("popoverTest1");
let popoverTest2 = document.getElementById("popoverTest2");
if (inputA === 0) {
// Make popoverTest1 come up here
// alert("This is when popoverTest1 should fire");
// document.getElementById("popoverTest1").popover('show')
bootstrap.Popover.getOrCreateInstance('#popoverTest1').show()
}
else if (inputB === inputC) {
// Make popoverTest2 come up here
//ert("This is when popoverTest2 should fire");
bootstrap.Popover.getOrCreateInstance('#popoverTest2').show()
}
}
оооо... спасибо. Я пробовал это, но не совсем этот синтаксис. Я пытаюсь сейчас.
Теперь это просто заставляет его снова исчезнуть после .. но это волшебная помощь! Спасибо.
У вас есть идеи, как сделать всплывающее окно понятным при следующем нажатии? Я пытался изменить data-bs-trigger = "manual" на data-bs-trigger = "focus", но это не сработало. Любая подсказка?
Это отдельный вопрос. Пожалуйста, сначала примите этот ответ на исходный вопрос.
У меня тоже что-то подобное работает, но я пытался отказаться от использования jQuery.