Mengapakah pop timbul Bootstrap 5 saya kehilangan keupayaan untuk membuka fokus selepas menutup dan membuka semula modal yang ada?
Saya mempunyai masalah dengan modal Bootstrap 5 saya dan pop timbul diletakkan di atasnya.
Dalam HTML saya, saya mempunyai yang berikut dan ia dipaparkan dengan betul apabila pengguna menuding pada butang. Pop timbul memaparkan "Adakah anda pasti gesaan menaip dan menasihati pengguna untuk mengklik butang (legar) untuk meneruskan. Mengklik butang mengambil fokus dan memastikan pop timbul terbuka sehingga diklik sekali lagi atau sehingga anda mengklik jauh daripada elemen.
Ini membolehkan penuding tetikus memasuki kandungan pop timbul dan klik butang "Teruskan".
Ini yang saya mahu: https://bootstrap-confirmation.js.org, tetapi dengan beberapa butiran lanjut tentang fungsi butang yang muncul pada tuding...
Apa pun, ia berfungsi hebat! Kali pertama...jika modal disembunyikan dan kemudian ditunjukkan sekali lagi, hanya bahagian tuding pencetus pop timbul berfungsi dan mengklik butang akan menyalakan pendengarnya, tetapi pop timbul enggan kekal terbuka (mengikut pencetus " "Fokus") )..
Tolong bantu, ini membuatkan saya gila!
Yang mengecewakan, coretan kod di bawah nampaknya berfungsi, walaupun ia menimbulkan ralat semasa menutup dan membuka semula modal, saya tidak pasti mengapa?
Diedit untuk menambah: Isu ini wujud dalam Chrome dan Safari, Safari akan membuat ralat konsol:
[Error] TypeError: undefined is not an object (evaluating 't.nodeType')
o (bootstrap.bundle.min.js:6:823)
_typeCheckConfig (bootstrap.bundle.min.js:6:7060)
_getConfig (bootstrap.bundle.min.js:6:69112)
W (bootstrap.bundle.min.js:6:7420)
cn (bootstrap.bundle.min.js:6:62612)
un
(anonymous function) (locate_dev.js:394)
dispatchEvent
trigger (bootstrap.bundle.min.js:6:5516)
(anonymous function) (bootstrap.bundle.min.js:6:52949)
a (bootstrap.bundle.min.js:6:2488)
dispatchEvent
s (bootstrap.bundle.min.js:6:736)
(anonymous function) (bootstrap.bundle.min.js:6:2539)
locate_dev.js Kod pada baris 394 ialah permulaan tetingkap pop timbul, mencurigakan:
// 1 - Init the popover
var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
html: true,
sanitize: false,
customClass: 'locate-footer-popover',
title: "Are you sure?",
content: $('[data-name="close-btn-popover-content"]')
});
let locateScreen = new bootstrap.Modal(document.getElementById('locateScreen'));
const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {
const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
html: true,
sanitize: false,
customClass: 'locate-footer-popover',
title: "Are you sure?",
// trigger: 'focus',
content: $('[data-name="close-btn-popover-content"]')
});
// 2 - Listen for clicks on the 'Close' button
$('#locate-btn-close').off('click');
$('#locate-btn-close').on('click', function() {
// This is firing, but the popover is closing when the mouse moves towards
// the buttons, after the modal is shown once, hidden, then re-displayed.
// Show popover buttons in popover
$('[data-name="close-btn-popover-content"] .confirm-buttons').show();
// Assign listeners to the popover confirm buttons
//$('#locate-btn-close-confirm').off()
$('#locate-btn-close-confirm').on('click', function() { // Close Session screen
locateScreen.hide();
});
// Hide 'Click to continue' text
$('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()
});
// When the popover is initially shown, hide the buttons and make sure the text reads:
// 'click the button to continue', etc
$('#locate-btn-close').on('inserted.bs.popover', function() {
$('[data-name="close-btn-popover-content"] .confirm-buttons').hide()
$('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()
});
});
locateModal.addEventListener('hidden.bs.modal', event => {
// At this point the $('[data-name="close-btn-popover-content"]') has been removed....
// Lets add it back in
$('#popover-close-btn-holder').html('<div data-name="close-btn-popover-content"><div class="col-sm-12 input-group-sm"><p>You can choose to close or save this session at the next screen.</p><p class="continue-text">Click the button to continue...</p></div><div class="text-center confirm-buttons" style="display:none;"><button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button><button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button></div></div>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#locateScreen">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="locateScreen" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Popover is on the Save Changes button. Click continue, which will hide the modal. Open it again from the button. On my own code the 'focus' part of the popover is lost and I can't get the mouse over the popover. Here it seems to work. No idea why. However the event listener on the confirm button is lost still.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<a id="locate-btn-close" tabindex="0" class="btn btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Save Changes</a>
<!-- popover -->
<div id="popover-close-btn-holder" class="d-none">
<div data-name="close-btn-popover-content">
<div class="col-sm-12 input-group-sm">
<p class="continue-text">Click the button to continue...</p>
</div>
<div class="text-center confirm-buttons" style="display:none;">
<button href="#" class="btn btn-sm btn-outline-danger me-2" id="locate-btn-close-cancel">Cancel</button>
<button href="#" class="btn btn-sm btn-outline-success" id="locate-btn-close-confirm">Continue</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Nampaknya menghasilkan ralat kerana kandungan pop timbul hilang pada satu ketika antara mod disembunyikan dan ditunjukkan semula.
Pertimbangkan:
var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
html: true,
sanitize: false,
customClass: 'locate-footer-popover',
title: "Are you sure?",
content: $('[data-name="close-btn-popover-content"]')
});
Ujian $('[data-name="close-btn-popover-content"]') Tidak mengembalikan apa-apa. Melampirkannya secara manual pada div induk semasa memulakan modal (sebelum memulakan pop timbul) juga tidak membantu.
