Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modal covering the entire screen of the device

I am trying to design a modal that covers the full width of the device. Here is my attempt:

<!-- Modal -->
  <div class="container-fluid modal fade bd-example-modal-lg" style=" max-width: 100vw;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Preview</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="padding:50px;"  id="result">

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
        </div>
      </div>
    </div>
  </div>
  <!--MODAL-->

This is what I am getting : Output

like image 650
Akshat Anurag Avatar asked Feb 10 '18 07:02

Akshat Anurag


People also ask

What is a full screen modal?

The Full-Sceen Modal Window component is a full-screen dialog that can be used to display relevant information without losing the context of the page. To connect the modal to its trigger (e.g., button), make sure the ID value of the first one is equal to the aria-controls value of the second one.

What are the parts of a modal?

The modal is composed of three distinct zones: A header, the body, and a footer. Components (eg. data table, form, progress indicator) can occupy the full width of the modal. Header: Includes a title, optional label, and the close icon.

What is a fullscreen modal?

That means the modal covers the entire screen or hides the entire main site from view. fullscreen: Add this class to the modal screen and the modal screen will appear on the entire screen. Syntax: Add the fullscreen class to the modal container as follows:

What is a modal and how do I use it?

A modal is often accompanied by a full-screen-covering overlay. This is useful for a number of reasons: It can darken (or otherwise mute) the rest of the screen, enforcing the “you need to deal with this before you leave” purpose of a modal.

What is the purpose of a modal lock screen?

This is useful for a number of reasons: It can darken (or otherwise mute) the rest of the screen, enforcing the "you need to deal with this before you leave" purpose of a modal. It can be used to prevent clicks/interactions on stuff outside the modal.

What is the purpose of a modal overlay?

A modal is often accompanied by a full-screen-covering overlay. This is useful for a number of reasons: It can darken (or otherwise mute) the rest of the screen, enforcing the "you need to deal with this before you leave" purpose of a modal. It can be used to prevent clicks/interactions on stuff outside the modal.


Video Answer


1 Answers

Creating a full screen modal is different in the latest Bootstrap 4, than in the previous answer for Bootstrap 3.

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

Then add modal-full class to the modal:

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-full" role="document">
        <div class="modal-content">
        ...
        </div>
    </div>
</div>    

Demo: Bootstrap 4 Full Screen Modal

like image 54
Zim Avatar answered Oct 23 '22 07:10

Zim