Answers for "bootstrap modal popup full screen"

1

bootstrap 4 modal fullscreen

<style>
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    padding: 0 !important; /* override inline padding-right added from js */
    width: 100vw !important;
    height: 100vh !important;
    outline: 0;
  }
  .modal-dialog-scrollable{ /* add this if you want to use modal-dialog-scrollable */
    max-height: none !important;
  }
  .modal-dialog.modal-xl {
    max-width: 100vw !important;
    margin: 0;
  }
  .modal .modal-content{
    position: relative;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }
</style>
Posted by: Guest on October-21-2021
3

bootstrap modal popup

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
Posted by: Guest on May-06-2020

Code answers related to "bootstrap modal popup full screen"

Browse Popular Code Answers by Language