Cara membuat Twitter bootstrap modal layar penuh

160

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

Bagaimana cara membuat modal bootup layar twitter popup layar penuh untuk kode di atas, saya mencoba bermain-main dengan css tetapi tidak bisa mendapatkannya dengan cara yang saya inginkan. Adakah yang bisa membantu saya dengan itu?

css twitter-bootstrap

— Hrishikesh Sardar
sumber

280

Saya mencapai ini di Bootstrap 3 dengan kode berikut:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

Secara umum, ketika Anda memiliki pertanyaan tentang masalah spasi / bantalan, coba klik kanan + (atau cmd + klik pada mac) elemen dan pilih "periksa elemen" di Chrome atau "periksa elemen dengan pembakar" di Firefox. Coba pilih elemen HTML yang berbeda di panel "elemen" dan edit CSS di sebelah kanan secara real-time sampai Anda mendapatkan padding / spasi yang Anda inginkan.

Ini demo langsung

Berikut ini tautan ke biola

— Chris J
sumber

12

Aku juga menambahkan margin: 0untuk .modal-dialog.

— harrison4

10

BTW: .modal-contentHight break ketika konten meluap di bagian bawah dan gulir ke bawah. Seharusnyamin-height: 100%; height: auto;

— Yanick Rochon

3

Jika merancang untuk aplikasi seluler, Anda dapat menempatkan CSS Chris di dalam kueri media agar memiliki lebar modal normal untuk layar yang lebih besar @ media (maks-lebar: 768px) {...}

— Nicolas Connault

Anda juga dapat menambahkan .modal {padding: ... px} jika Anda memerlukan "hampir" modal layar penuh

— andrii

8

.modal-dialogjuga perlu max-width: 100%;untuk bootstrap 4

— Anand Rockzz

25

Solusi yang dipilih tidak mempertahankan gaya sudut bulat. Untuk menjaga sudut bulat, Anda harus mengurangi lebar dan tinggi sedikit dan menghapus jari-jari perbatasan 0. Juga tidak menunjukkan bilah gulir vertikal ...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

— Esteban
sumber

1

jawaban yang lebih benar yang tetap mempertahankan nuansa model dengan sudut-sudut bulat, jawaban yang diterima menyajikan lapisan overlay alih-alih modal

— Clain Dsilva

Jika modal menempati layar penuh, itu akan terlihat mengerikan (IMHO) jika Anda memiliki sudut di sekitarnya.

— Demensik,

16

Untuk bootstrap 4 saya harus menambahkan kueri media dengan max-width: tidak ada

@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

— A. Morel
sumber

16

Saya datang dengan solusi "responsif" untuk modals layar penuh:

Mode Layar Penuh yang hanya bisa diaktifkan pada breakpoint tertentu . Dengan cara ini modal akan menampilkan "normal" pada layar yang lebih luas (desktop) dan layar penuh pada layar yang lebih kecil (tablet atau seluler) , memberikannya perasaan seperti aplikasi asli.

Diimplementasikan untuk Bootstrap 3 dan Bootstrap 4 .

Bootstrap v4

Kode generik berikut harus berfungsi:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

Dengan memasukkan kode scss di bawah ini, ia menghasilkan kelas-kelas berikut yang perlu ditambahkan ke .modalelemen:

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

Kode scss adalah:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

  .modal-body {
    overflow-y: auto;
  }

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

Demo di Codepen: https://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

Berdasarkan respons sebelumnya terhadap topik ini (@Chris J, @kkarli), kode generik berikut ini akan berfungsi:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

.modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

Jika Anda ingin menggunakan modals layar penuh yang responsif, gunakan kelas-kelas berikut yang perlu ditambahkan ke .modalelemen:

.modal-fullscreen-md-down- modalnya adalah layar penuh untuk layar yang lebih kecil dari 1200px.
.modal-fullscreen-sm-down- modalnya adalah layar penuh untuk layar yang lebih kecil dari 922px.
.modal-fullscreen-xs-down- modalnya adalah layar penuh untuk layar yang lebih kecil dari 768px.

Lihatlah kode berikut:

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

Demo tersedia di Codepen: https://codepen.io/andreivictor/full/KXNdoO .

Mereka yang menggunakan Sass sebagai preprosesor dapat memanfaatkan mixin berikut:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}

— andreivictor
sumber

11

Kelas berikut akan membuat modal layar penuh di Bootstrap:

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

Saya tidak yakin bagaimana isi dalam modal Anda terstruktur, ini mungkin memiliki efek pada keseluruhan tinggi tergantung pada CSS yang terkait dengannya.

— micjamking
sumber

apa itu .fullscreen? Saya memasukkan css di #myModal yang berfungsi untuk lebar tetapi tidak tinggi.

— Hrishikesh Sardar

.fullscreenadalah kelas yang saya buat untuk menyelesaikan masalah, tidak termasuk dalam Bootstrap. Bisakah Anda memposting sampel kode Anda di JSFiddle atau CodePen ? Saya tidak dapat membantu Anda tanpa melihat kode Anda.

— micjamking

untuk menambah tinggi, Anda perlu menambahkan tinggi pada model-tubuh bukan pada #myModal.

— QasimRamzan

9

untuk bootstrap 4

tambahkan kelas:

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

dan dalam HTML:

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">

— Vlad
sumber

7

The potongan dari @ Chris J memiliki beberapa masalah dengan margin dan melimpah. Perubahan yang diajukan oleh @YanickRochon dan @Joana, berdasarkan fiddel dari @Chris J dapat ditemukan di jsfiddle berikut .

Itulah kode CSS yang berfungsi untuk saya:

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

— kkarli
sumber

2

Anda perlu mengatur tag DIV Anda seperti di bawah ini.

Temukan detail selengkapnya> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>

— BenW
sumber

-1

Variasi solusi saya: (scss)

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

(css)

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}

— Demensik
sumber

-1

.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}

— Alireza Pars
sumber

2

Coba jelaskan lebih jelas mengapa ini adalah jawaban untuk pertanyaan itu.

— Jeroen Heier

-1

Gunakan ini:

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

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

sehingga:

<div id="myModal" class="modal" role="dialog">
    <div class="modal-dialog modal-full">
        <!-- Modal content-->
        <div class="modal-content ">
            <div class="modal-header ">                    
                <button type="button" class="close" data-dismiss="modal">&times; 
                </button>
                <h4 class="modal-title">hi</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
        </div>

    </div>
</div>

— hojjat.mi
sumber