<div class="modal fade" id ="basicModal" > <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button class="btn-close" data-dismiss="modal" > <i class="fa-solid"></i> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-sm btn-danger light" "button" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-sm btn-primary" >Save changes</button> </div> </div> </div> </div>
Modal body text goes here
<div class="modal fade" id ="exampleModalCenter" > <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button class="btn-close" data-dismiss="modal" > <i class="fa-solid"></i> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-sm btn-danger light" "button" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-sm btn-primary" >Save changes</button> </div> </div> </div> </div>
<div class="modal fade bd-example-modal-lg" tabindex ="-1" role="dialog"aria-hidden="true"> <div class="modal-dialog modal-lg" > <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button class="btn-close" data-dismiss="modal" > <i class="fa-solid"></i> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-sm btn-danger light" "button" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-sm btn-primary" >Save changes</button> </div> </div> </div> </div>
<div class="modal fade bd-example-modal-sm" tabindex ="-1" role="dialog"aria-hidden="true"> <div class="modal-dialog modal-sm" > <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button class="btn-close" data-dismiss="modal" > <i class="fa-solid"></i> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-sm btn-danger light" "button" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-sm btn-primary" >Save changes</button> </div> </div> </div> </div>
Using: Add class "tf-popup-auto" inside the body tag and add content popup to the page you need
<body class="tf-popup-auto" >
<!-- Content popup -->
<div class="wd-popup-form" > <div class="modal-menu__backdrop" > <div class="content"> <div class="content-left"> <div class="thumb"><img src="images/review/bg-popup.jpg" src="images"></div> <div class="content-right" > <a class="title-button-group"> <i class="icon-close"></i> </a> <h6 >Welcome to jobitex</h6> <p>Sign up to get all the latest Jobitex news, website updates, offers and promos.</p> <form action="get"> <input>type="text" placeholder="Email"> <div class="group-radio"> <input>type="radio" > <label>Prevent this Pop-up </label> </div> </form> </div> </div>