There is a bootstrap mesh with modal windows. How to position them so that they float not in the standard in the center of the screen each time, but directly above the element that caused them.

Demonstration enter image description here

Code:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-6"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> </div> </div> <div class="col-6"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button> </div> </div> </div> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>

    1 answer 1

    Something like this: (the modal__positioned class is also in case this modal is used elsewhere)

     $('#myModal').on('shown.bs.modal', function(event) { var modal = $(this).find(".modal-dialog"); var button = $(event.relatedTarget); if (button.hasClass("modal__positioning")) { modal.addClass("modal__positioned"); var top = button.offset().top - modal.outerHeight() - 10 - $(window).scrollTop(); top = top > 0 ? top : 0; modal.css("top", top); var left = button.offset().left - 20; left = left > 0 ? left : 0; left = (left + modal.outerWidth()) < $(window).width() ? left : ($(window).width() - modal.outerWidth() - 10) modal.css("left", left); } else { modal.removeClass("modal__positioned"); } }) 
     .modal.show .modal__positioned { position: absolute; width: 300px; margin: 0; } 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-6"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary modal__positioning" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary modal__positioning" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary modal__positioning" data-toggle="modal" data-target="#myModal">Open modal</button> </div> </div> <div class="col-6"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary modal__positioning" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary modal__positioning" data-toggle="modal" data-target="#myModal">Open modal</button> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eius qui, eveniet incidunt expedita officiis est facere non dolorem cum aut maxime recusandae repellendus, voluptas similique repudiandae illum repellat velit.</p> <button type="button" class="btn btn-primary modal__positioning" data-toggle="modal" data-target="#myModal">Open modal</button> </div> </div> </div> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>