Bootstrap - Phương thức enable()
Phương thức enable()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calling Bootstrap Popover Methods Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 100px 20px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
var showPopover = document.getElementById("showPopover");
var hidePopover = document.getElementById("hidePopover");
var togglePopover = document.getElementById("togglePopover");
var enablePopover = document.getElementById("enablePopover");
var disablePopover = document.getElementById("disablePopover");
var toggleEnabledPopover = document.getElementById("toggleEnabledPopover");
var updatePopover = document.getElementById("updatePopover");
var disposePopover = document.getElementById("disposePopover");
// Create a popover instance
var myPopover = new bootstrap.Popover(document.getElementById("myPopover"));
showPopover.addEventListener("click", function(){
myPopover.show();
});
hidePopover.addEventListener("click", function(){
myPopover.hide();
});
togglePopover.addEventListener("click", function(){
myPopover.toggle();
});
enablePopover.addEventListener("click", function(){
myPopover.enable();
});
disablePopover.addEventListener("click", function(){
myPopover.disable();
});
toggleEnabledPopover.addEventListener("click", function(){
myPopover.toggleEnabled();
});
updatePopover.addEventListener("click", function(){
myPopover.update();
});
disposePopover.addEventListener("click", function(){
myPopover.dispose();
});
});
</script>
</head>
<body>
<div class="bs-example">
<p>
<button type="button" class="btn btn-primary btn-lg" id="myPopover" data-bs-toggle="popover" title="Popover title" data-bs-content="This is a simple Bootstrap popover with a title and some content.">Click to toggle popover</button>
</p>
<div class="mt-5">
<p>Click on the following buttons to control the popover manually.</p>
<button type="button" class="btn btn-primary" id="showPopover">Show</button>
<button type="button" class="btn btn-warning" id="hidePopover">Hide</button>
<button type="button" class="btn btn-success" id="togglePopover">Toogle</button>
<button type="button" class="btn btn-info" id="enablePopover">Enable</button>
<button type="button" class="btn btn-secondary" id="disablePopover">Disable</button>
<button type="button" class="btn btn-dark" id="toggleEnabledPopover">Toogle Enabled</button>
<button type="button" class="btn btn-warning" id="updatePopover">Update</button>
<button type="button" class="btn btn-danger" id="disposePopover">Dispose</button>
</div>
</div>
</body>
</html>