Scribd
Upload
8 views3 pages

Practical 19

8

Uploaded by

mrjrcartos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views3 pages

Practical 19

8

Uploaded by

mrjrcartos
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Modal Example</title>

<link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap-grid.min.css">

<link rel="stylesheet" href="/bootstrap-5.3.3-dist/css/bootstrap.css">

<style>

body {

padding-top: 20px;

</style>

</head>

<body>

<div class="container">

<h1 class="mb-4">Bootstrap Model Example</h1>

<!-- Save Record Button -->

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-


target="#saveModal">

Save Record

</button>

<!-- Delete Record Button -->

<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-


target="#deleteModal">

Delete Record

</button>

</div>
<!-- Save Record Modal -->

<div class="modal fade" id="saveModal" tabindex="-1" aria-labelledby="saveModalLabel" aria-


hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="saveModalLabel">Save Record Confirmation</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-


label="Close"></button>

</div>

<div class="modal-body">

Are you sure you want to save this record?

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-bs-


dismiss="modal">Cancel</button>

<button type="button" class="btn btn-primary">Save</button>

</div>

</div>

</div>

</div>

<!-- Delete Record Modal -->

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel"


aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="deleteModalLabel">Delete Record Confirmation</h5>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-


label="Close"></button>

</div>

<div class="modal-body">
Are you sure you want to delete this record?

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary" data-bs-


dismiss="modal">Cancel</button>

<button type="button" class="btn btn-danger">Delete</button>

</div>

</div>

</div>

</div>

<!-- Bootstrap JS and dependencies (Popper.js) -->

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>

</body>

</html>

You might also like