Get started with bootstrap-modal CDN
Stable version
Copied!
How to start using bootstrap-modal CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with bootstrap-modal CDN - cdnhub.io</title>
<!-- Add Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Bootstrap Modal CSS -->
<link rel="stylesheet" href="https://cdn.cdnhub.io/bootstrap-modal/2.2.6/css/bootstrap-modal-bs4dialog.min.css">
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open Modal
</button>
<!-- Add Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap Modal JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<!-- Add Bootstrap Modal Manager JS -->
<script src="https://cdn.cdnhub.io/bootstrap-modal/2.2.6/js/bootstrap-modalmanager.min.js"></script>
<script src="https://cdn.cdnhub.io/bootstrap-modal/2.2.6/js/bootstrap-modal.min.js"></script>
<script>
// Initialize Bootstrap Modal
$(function() {
$('#myModal').modal({backdrop: 'static', keyboard: false});
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!