Twitter Bootstrap Modal Tam Ekran Nasıl Yapılır

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>

Yukarıdaki kod için bir twitter bootstrap modal popup tam ekran nasıl yapabilirim, ben css ile uğraşmayı denedim ama istediğim şekilde elde edemedim. Herkes bana bu konuda yardımcı olabilir mi.

css twitter-bootstrap

— Hrishikesh Sardar
kaynak

280

Ben aşağıdaki kod ile Bootstrap 3 elde:

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

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

Genel olarak, boşluk bırakma / doldurma sorunları hakkında sorularınız olduğunda, öğeyi sağ tıklayın (veya mac üzerinde cmd + tıklama) ve Chrome'da "öğeyi incele" veya Firefox'ta "ateşböceği olan öğeyi incele" yi seçin. "Öğeler" panelinde farklı HTML öğeleri seçmeyi ve istediğiniz dolgu / boşluğu alana kadar sağda CSS'yi gerçek zamanlı olarak düzenlemeyi deneyin.

İşte canlı bir demo

İşte kemanın bir bağlantısı

— Chris J
kaynak

12

Ben de eklersiniz margin: 0için .modal-dialog.

— harrison4

10

BTW: .modal-contentiçerik alttan taştığında ve aşağı kaydırıldığında yükseklik kırılır. O olmalımin-height: 100%; height: auto;

— Yanick Rochon

3

Bir mobil uygulama için tasarlıyorsanız, Chris'in CSS'sini daha geniş ekranlar için normal mod genişliğine sahip olacak şekilde bir medya sorgusunun içine koyabilirsiniz @media (max-width: 768px) {...}

— Nicolas Connault 7:30

Ayrıca "neredeyse" tam ekran modal gerekiyorsa .modal {padding: ... px} ekleyebilirsiniz

— andrii

8

.modal-dialogAyrıca ihtiyacı max-width: 100%;için bootstrap 4

— Anand Rockzz

25

Seçilen çözüm yuvarlak köşe stilini korumaz. Yuvarlak köşeleri korumak için genişliği ve yüksekliği biraz azaltmalı ve kenarlık yarıçapı 0'ı kaldırmalısınız. Ayrıca dikey kaydırma çubuğunu göstermez ...

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

.modal-content {
  height: 99%;
}

— Esteban
kaynak

1

yuvarlatılmış köşeli model hissini koruyan daha doğru bir cevap, kabul edilen cevap modal yerine bir kaplama katmanı sunar

— Clain Dsilva

Kalıcı tam ekranı kaplıyorsa, etrafında yuvarlak köşeler varsa korkunç görünecektir (IMHO).

— Dementic

16

Bootstrap 4 için max-width ile medya sorgusu eklemeliyim: none

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

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

.modal-content {
  height: 99%;
}

— A. Morel
kaynak

16

Tam ekran modals için "duyarlı" bir çözüm buldum:

Yalnızca belirli kesme noktalarında etkinleştirilebilen Tam Ekran Yardımcı Fiiller . Bu şekilde modsal, daha geniş (masaüstü) ekranlarda "normal" ve daha küçük (tablet veya mobil) ekranlarda tam ekran görüntüleyerek yerel bir uygulama hissi verir.

Bootstrap 3 ve Bootstrap 4 için uygulandı .

Bootstrap v4

Aşağıdaki genel kod çalışmalıdır:

.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;
}

Aşağıdaki scss kodunu ekleyerek, .modalöğeye eklenmesi gereken aşağıdaki sınıfları oluşturur :

+---------------+---------+---------+---------+---------+---------+
|               |   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%   |
+---------------+---------+---------+---------+---------+---------+

Scss kodu:

@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();
    }
  }
}

Codepen Demosu: https://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

Bu konuya verilen önceki yanıtlara (@Chris J, @kkarli) dayanarak, aşağıdaki genel kod çalışmalıdır:

.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;
}

Duyarlı tam ekran modlarını kullanmak istiyorsanız, şu sınıflara eklenmesi gereken sınıfları kullanın: .modal öğeye :

.modal-fullscreen-md-down - mod daha küçük ekranlar için tam ekran 1200px .
.modal-fullscreen-sm-down - mod daha küçük ekranlar için tam ekran 922px .
.modal-fullscreen-xs-down - mod daha küçük ekran için tam ekran 768px .

Aşağıdaki koda bir göz atın:

/* 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 Codepen'de mevcuttur: https://codepen.io/andreivictor/full/KXNdoO .

Sass'ı önişlemci olarak kullananlar, aşağıdaki karışımdan yararlanabilirler:

@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
kaynak

11

Aşağıdaki sınıf Bootstrap'te tam ekran bir mod oluşturacak:

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

Modalınızın iç içeriğinin nasıl yapılandırıldığından emin değilim, bunun ilişkili CSS'ye bağlı olarak toplam yükseklik üzerinde bir etkisi olabilir.

— micjamking
kaynak

.fullscreen nedir? Ben genişlik ama yükseklik için çalıştı # myModal css dahil.

— Hrishikesh Sardar

.fullscreenSorunu çözmek için oluşturduğum bir sınıftır, Bootstrap'a dahil değildir. Kodunuzun bir örneğini JSFiddle veya CodePen'e gönderebilir misiniz? Kodunuzu görmeden size yardım edemem.

— Ağustos'ta

yükseklik eklemek için #myModal değil model gövdesine yükseklik eklemeniz gerekir.

— QasimRamzan

9

bootstrap 4 için

sınıf ekle:

.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;
}

ve HTML olarak:

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

— Vlad
kaynak

7

Pasajı @Chris J'den marjlarına ve taşma ile bazı sorunlar vardı. @Chris J'nin kemanına dayalı olarak @YanickRochon ve @Joana tarafından önerilen değişiklikler aşağıdaki jsfiddle'da bulunabilir .

Benim için çalışan CSS kodu:

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

— kkarli
kaynak

2

DIV etiketlerinizi aşağıdaki gibi ayarlamanız gerekir.

Daha fazla ayrıntı bulun> 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
kaynak

-1

Çözümün varyasyonu: (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%;
}

— Dementic
kaynak

-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
kaynak

2

Bunun neden sorunun cevabı olduğunu daha açık bir şekilde açıklamaya çalışın.

— Jeroen Heier

-1

Bunu kullan:

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

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

ve bu yüzden:

<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
kaynak