Как добавить опцию sanitize: false во всплывающее окно?
Я пытаюсь поместить кнопку внутри Popovers в Bootstrap. Но мне это не удалось.
Я использую Bootstrap-Popover. Я хочу иметь кнопку внутри поповера.
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle = "popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
});
popoverList.forEach(function (popover) {
popover.getTipElement().getElementsByClassName('.servicePOP').innerHTML += '<button type = "button" class = "btn btn-primary">My Button</button>';
});<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "col-lg-4 mb-3 servicePOP" data-aos = "fade-up" tabindex = "0" data-bs-toggle = "popover" data-bs-placement = "top" data-bs-trigger = "focus" title = "Title" data-bs-content = "A short description">
<div class = "card position-relative">
<div class = "d-block card-icon">
<img src = "images.png" class = "card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt = "Title">
</div>
<div class = "card-body text-center mt-5 pt-5">
<a href = "# class = " text-decoration-none text-dark ">
<h5 class = "card-title ">Title</h5>
</a>
<p>A short description</p>
<a href = "# " class = "btn btn-primary ">More Details</a>
</div>
</div>
</div>Мой вопрос:
Как добавить опцию sanitize: false во всплывающее окно?
@morganney - Нет. Как мне это попробовать?
Ответы 1
Вы можете установить sanitize: false в качестве опции, которую вы можете пройти, когда включите всплывающее окно. Вставка HTML во всплывающее окно также требует, чтобы для параметра html было установлено значение true (по умолчанию false).
const servicePOP = document.querySelector('.servicePOP')
const popover = new bootstrap.Popover(servicePOP, {
sanitize: false,
html: true,
content: '<button type = "button" class = "btn btn-primary">My Button</button>'
})
Если у вас есть несколько всплывающих окон на странице, вы можете инициализировать все всплывающие окна, выбрав их по их атрибуту data-bs-toggle, например:
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle = "popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, options))
Затем мы можем передать нашу конфигурацию всплывающего окна в настройках и прикрепить функцию к опции content. Внутри этой функции мы можем получить доступ к триггерному элементу всплывающего окна и, в моем примере, получить от него атрибут data-pop-example (который я добавил в HTML) и вставить его во всплывающее окно content в качестве имени кнопки, например так:
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle = "popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl,{
sanitize: false,
html: true,
content: function() {
const popExample = popoverTriggerEl.getAttribute('data-pop-example')
return `<button type = "button" class = "btn btn-primary">${popExample}</button>`;
}
}))<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style = "height:125px"></div>
<div class = "col-lg-4 mb-3 servicePOP" data-aos = "fade-up" tabindex = "0" data-bs-toggle = "popover" data-bs-placement = "top" data-bs-trigger = "focus" title = "Title" data-pop-example = "Button 1">
<div class = "card position-relative">
<div class = "d-block card-icon">
<img src = "images.png" class = "card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt = "Title">
</div>
<div class = "card-body text-center mt-5 pt-5">
<a href = "#" class = " text-decoration-none text-dark ">
<h5 class = "card-title ">Title</h5>
</a>
<p>A short description</p>
<a href = "# " class = "btn btn-primary ">More Details</a>
</div>
</div>
</div>
<div class = "col-lg-4 mb-3 servicePOP" data-aos = "fade-up" tabindex = "0" data-bs-toggle = "popover" data-bs-placement = "top" data-bs-trigger = "focus" title = "Title 2" data-pop-example = "Button 2">
<div class = "card position-relative">
<div class = "d-block card-icon">
<img src = "images.png" class = "card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt = "Title">
</div>
<div class = "card-body text-center mt-5 pt-5">
<a href = "#" class = " text-decoration-none text-dark ">
<h5 class = "card-title ">Title</h5>
</a>
<p>A short description</p>
<a href = "# " class = "btn btn-primary ">More Details</a>
</div>
</div>
</div>Есть много вещей, которые вы можете сделать внутри функции, чтобы установить content, например, получить доступ к данным JSON, которые вы хотите вставить, пользовательские URL-адреса и т. д. Здесь нет предела.
Спасибо за ответ, Но у меня три карты i.stack.imgur.com/lmSgp.png. Это работает только в первую очередь. Не второй и не третий
И как показать описание?
@MahmoudKhoravi Смотрите мою правку. Просто выберите триггерные элементы всплывающего окна по идентификатору и дублирующему коду, предполагая, что вам нужен разный контент для каждого всплывающего окна. Код подходит для 3-х карт. На ваш второй вопрос; Я не знаю, что вы имеете в виду под описанием. Наконец, дополнительные вопросы, как правило, в порядке, но если вам нужны новые функции, попробуйте сначала их сами, а затем снова спросите SO, если вы застряли.
Может быть, менеджер хочет сделать еще сотню. Я хочу создать с помощью цикла for. Я не хочу вводить каждый код. Как это возможно?
Спасибо за Ваш ответ. Но у меня есть вопрос. Как добавить такое описание? i.stack.imgur.com/uUo7Y.png
Описание @MahmoudKhoravi = content в моем примере, приятель. Просто добавьте любой текст, который вы хотите, в оператор return в моем примере. И читайте документы, там вам все подскажут.
Вы пробовали
sanitize: falseили отказались отsanitizeFn?