Question : modal
Answered by : plain-pintail-bfdv5cu25pvt
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</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>Source : https://getbootstrap.com/docs/4.5/components/modal/ | Last Update : Sun, 21 Jun 20
Question : how to create modal
Answered by : hussein-asadi
<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9;
}
button:hover { opacity:1;
}
.cancelbtn, .deletebtn { float: left; width: 50%;
}
/* Add a color to the cancel button */
.cancelbtn { background-color: #ccc; color: black;
}
/* Add a color to the delete button */
.deletebtn { background-color: #f44336;
}
/* Add padding and center-align text to the container */
.container { padding: 16px; text-align: center;
}
/* The Modal (background) */
.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: #474e5d; padding-top: 50px;
}
/* Modal Content/Box */
.modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */
hr { border: 1px solid #f1f1f1; margin-bottom: 25px;
}
/* The Modal Close Button (x) */
.close { position: absolute; right: 35px; top: 15px; font-size: 40px; font-weight: bold; color: #f1f1f1;
}
.close:hover,
.close:focus { color: #f44336; cursor: pointer;
}
/* Clear floats */
.clearfix::after { content: ""; clear: both; display: table;
}
/* Change styles for cancel button and delete button on extra small screens */
@media screen and (max-width: 300px) { .cancelbtn, .deletebtn { width: 100%; }
}
</style>
<body>
<h2>Delete Modal</h2>
<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
<div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> <form class="modal-content" action="/action_page.php"> <div class="container"> <h1>Delete Account</h1> <p>Are you sure you want to delete your account?</p> <div class="clearfix"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="deletebtn">Delete</button> </div> </div> </form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }
}
</script>
</body>
</html>Source : | Last Update : Sat, 04 Jun 22
Question : modal html
Answered by : hamza-bin-sajid
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<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">New message</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="col-form-label">Recipient:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="col-form-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div>
</div>Source : https://getbootstrap.com/docs/4.0/components/modal/ | Last Update : Tue, 01 Dec 20
Question : modal with in modal
Answered by : lovely-leopard-tg6pynigxj31
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<a data-toggle="modal" href="#myModal1" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal 1</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> <p> Content 1. </p> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> </div> </div> </div>
</div> <div class="modal" id="myModal2"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">modal 2</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> <p> modal 2 </p> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal3</a> </div> </div> </div> </div>
<div class="modal" id="myModal3"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal 3</h4> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="container"></div> <div class="modal-body"> <p> modal 3 </p> </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> </div> </div> </div> $('.modal').on('shown.bs.modal', function (e) { $('.modal.show').each(function (index) { $(this).css('z-index', 1101 + index*2); }); $('.modal-backdrop').each(function (index) { $(this).css('z-index', 1101 + index*2-1); }); });Source : https://stackoverflow.com/questions/19528173/bootstrap-open-another-modal-in-modal | Last Update : Sun, 19 Dec 21
Question : modal sample
Answered by : lucky-lemur-t83ktojr29xw
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop"> Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</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">Understood</button> </div> </div> </div>
</div>Source : https://getbootstrap.com/docs/4.6/components/modal/ | Last Update : Thu, 29 Jul 21
Question : modal
Answered by : iheb-elhabib
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</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>Source : | Last Update : Tue, 04 Jan 22
Question : modal html
Answered by : pho-dev
<div id="modal-gallery-before-after"> <div class="popup"> <div class="popup__overlay" onclick="closeModal()"></div> <div class="popup__wrap"> <div class="popup__close" onclick="closeModal()"> <svg style="width:16px" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M15.4905 15.4905C15.3294 15.652 15.1379 15.7802 14.9272 15.8676C14.7165 15.955 14.4905 16 14.2624 16C14.0342 16 13.8083 15.955 13.5976 15.8676C13.3868 15.7802 13.1954 15.652 13.0342 15.4905L7.99963 10.456L2.96504 15.4905C2.63931 15.8163 2.19753 15.9993 1.73688 15.9993C1.27623 15.9993 0.834449 15.8163 0.508721 15.4905C0.182992 15.1648 0 14.723 0 14.2624C0 14.0343 0.0449253 13.8084 0.132212 13.5977C0.219498 13.387 0.347436 13.1955 0.508721 13.0342L5.54331 7.99963L0.508721 2.96504C0.182992 2.63931 0 2.19753 0 1.73688C0 1.27623 0.182992 0.834449 0.508721 0.508721C0.834449 0.182992 1.27623 0 1.73688 0C2.19753 0 2.63931 0.182992 2.96504 0.508721L7.99963 5.54331L13.0342 0.508721C13.1955 0.347436 13.387 0.219498 13.5977 0.132212C13.8084 0.0449253 14.0343 0 14.2624 0C14.4905 0 14.7163 0.0449253 14.9271 0.132212C15.1378 0.219498 15.3293 0.347436 15.4905 0.508721C15.6518 0.670005 15.7798 0.861477 15.8671 1.07221C15.9543 1.28293 15.9993 1.50879 15.9993 1.73688C15.9993 1.96497 15.9543 2.19083 15.8671 2.40156C15.7798 2.61229 15.6518 2.80376 15.4905 2.96504L10.456 7.99963L15.4905 13.0342C16.1525 13.6962 16.1525 14.8111 15.4905 15.4905Z" fill="#CF2144"/> </svg> </div> <div class="popup__item" data-popup =""> <div class="appointment__form form--style-full"> <div class="modal-gallery-item"></div> </div> </div> </div> </div>
</div> <div id="<?= get_the_ID() ?>" class="compare__item-<?= get_the_ID() ?>" data-popup="<?= get_the_ID() ?>" onClick="modalGallery(this.id)"> <div class="modal-image"> <?php the_post_thumbnail(); ?> </div> <div class="modal-title"> <p><?= wp_trim_words(the_content(), 14); ?></p> </div> </div>Source : | Last Update : Mon, 01 Aug 22
Question : modal
Answered by : mary-oseafiana
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header w-100"> <h1 class="modal-title fs-5 text-center" id="exampleModalLabel">Modal title</h1> <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>Source : https://getbootstrap.com/docs/5.3/components/modal/#how-it-works | Last Update : Thu, 12 Jan 23