I recently start learning jquery, and php now i want to develop a very simple website and i need to have several modals, although i can copy a modal from here getbootstrap.com and paste it on my index page, it will work, but it would be to hard to find like div or input, that is why i want make a separate page for modals, I did make one here is the modal page + modal.js class and the Index page.
<!-- modal page -->
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1" >
modal 1
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- =========================modal 2 -->
</body>
</html><!-- Index: page that have the modal button -->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./fontawesome/css/all.min.css">
<script src="./bootstrap/jquery.min.js"></script>
<script src="./bootstrap/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion"><i class="fas fa-address-card"></i></button>
<div class="panel">
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>insert</th>
<th>edit</th>
<th>delete</th>
<th>view</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn1">
modal 1
</button>
</td>
<td>
<button type="button" class="btn btn-primary btn1">
<i class="fas fa-address-card">
</i>
</button>
</td>
<td>
<button type="button" class="btn btn-primary btn1">
<i class="fas fa-address-card">
</i>
</button>
</td>
<td>
<button type="button" class="btn btn-primary btn1">
<i class="fas fa-address-card">
</i>
</button>
</td>
</tr>
<tr>
</tbody>
</table>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit omnis aspernatur doloremque quidem eos itaque sed earum nesciunt autem. Ullam quod obcaecati, fuga alias totam autem iusto id ratione reprehenderit.</div>
<div>Totam eum saepe, commodi nemo atque in aperiam nisi tempore! Beatae, sequi aperiam commodi quam distinctio, fugit incidunt officia aliquam, suscipit blanditiis facilis ad vel consectetur temporibus? Soluta placeat, autem?</div>
<div>Laudantium aperiam veniam, corrupti maiores eligendi nam unde possimus dolorem necessitatibus vitae, velit quam id nobis debitis rerum. Amet non possimus, voluptatem! Consectetur ex, in eos eaque reprehenderit at aliquam.</div>
</div>
</div>
<button class="accordion"><i class="fas fa-address-card"></i>Section 2 </button>
<div class="panel">
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>insert</th>
<th>edit</th>
<th>delete</th>
<th>view</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
</tbody>
</table>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>insert</th>
<th>edit</th>
<th>delete</th>
<th>view</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
</tbody>
</table>
</div>
</div>
<button class="accordion">Section 4</button>
<div class="panel">
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>insert</th>
<th>edit</th>
<th>delete</th>
<th>view</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
</tbody>
</table>
</div>
</div>
<button class="accordion">Section 5</button>
<div class="panel">
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>insert</th>
<th>edit</th>
<th>delete</th>
<th>view</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
</tbody>
</table>
</div>
</div>
</body>
<script src="modal.js">
</script>
</html> $(document).on('click', '.btn1', function(){
$('#modal1').modal('show');
});
