Warum verliert mein Bootstrap 5-Popup die Fähigkeit, den Fokus zu öffnen, nachdem es das Modal, in dem es sich befand, geschlossen und erneut geöffnet hat?
Ich habe ein Problem mit meinem Bootstrap 5-Modal und dem darüber platzierten Popup.
In meinem HTML habe ich Folgendes und es wird korrekt angezeigt, wenn der Benutzer mit der Maus über die Schaltfläche fährt. Das Popup zeigt die Eingabeaufforderung „Sind Sie sicher?“ an und fordert den Benutzer auf, auf eine Schaltfläche zu klicken (mit der Maus darüber zu fahren), um fortzufahren. Durch Klicken auf die Schaltfläche wird der Fokus aktiviert und das Popup bleibt geöffnet, bis Sie erneut darauf klicken oder bis Sie vom Element wegklicken.
Dadurch kann der Mauszeiger in den Popup-Inhalt gelangen und auf die Schaltfläche „Weiter“ klicken.
Das ist es, was ich möchte: https://bootstrap-confirmation.js.org, aber mit einigen weiteren Details zur Funktionalität der Schaltfläche, die beim Hover erscheint ...
Jedenfalls funktioniert es großartig! Beim ersten Mal...wenn das Modal ausgeblendet und dann wieder angezeigt wird, funktioniert nur der Hover-Teil des Popup-Triggers, und durch Klicken auf die Schaltfläche wird der Listener ausgelöst, aber das Popup weigert sich, geöffnet zu bleiben (gemäß dem „Focus“-Trigger). )..
Bitte helfen Sie, das macht mich verrückt!
Frustrierenderweise scheint das folgende Code-Snippet zu funktionieren, obwohl es beim Schließen und erneuten Öffnen des Modals einen Fehler auslöst. Ich bin mir nicht sicher, warum?
Bearbeitet, um hinzuzufügen: Dieses Problem besteht sowohl in Chrome als auch in Safari. Safari erzeugt einen Konsolenfehler:
[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 Der Code in Zeile 394 ist eine Popup-Fensterinitialisierung, verdächtig:
// 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>
Scheint Fehler zu erzeugen, da der Inhalt des Popups irgendwann zwischen dem Ausblenden und erneuten Anzeigen des Modals verschwindet.
Bedenken Sie:
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"]')
});
Test $('[data-name="close-btn-popover-content"]') Gibt überhaupt nichts zurück. Das manuelle Anhängen an das übergeordnete Div beim Initialisieren des Modals (vor dem Initialisieren des Popups) hilft ebenfalls nicht.
