Build a Bootstrap 4 Image Modal or Popup on Button Click in Javascript Full Project For Beginners



Welcome folks today in this blog post we will be building a bootstrap 4 image modal or popup on button click in javascript. All the full source code of the application is shown below.




Get Started




In order to get started you need to make an index.html file and copy paste the following code






<link rel="stylesheet" href=""/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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 S</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
      <div class="modal-body">
        <img src="" />
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<script src=""></script>
<script src=""></script>



And now make a style.css file and copy paste the following code

See also  Koa.js Tutorial to Delete Existing Cookies with Expiration Time Using ctx.cookies.set() Method in Browser Full Project For Beginners






body {
  display: flex;
  align-items: center;
  justify-content: center;
button {
  margin-top: calc(50vh - 2em);

img {
  width: 100%;

Leave a Reply