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 : bootstrap modals
Answered by : obedient-opossum-wjitpdfhugir
<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">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"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div>
</div>Source : https://getbootstrap.com/docs/4.0/components/modal/ | Last Update : Fri, 15 May 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
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