วิธีทำให้ Twitter bootstrap เป็นกิริยาช่วยเต็มหน้าจอ

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>

ฉันจะทำให้ bootstrap twitter แบบเต็มหน้าจอ modal สำหรับรหัสข้างต้นฉันพยายามเล่นรอบกับ CSS แต่ไม่สามารถรับได้ตามที่ฉันต้องการ ใครก็ได้โปรดช่วยฉันด้วย

css twitter-bootstrap

— Hrishikesh Sardar
แหล่งที่มา

280

ฉันประสบความสำเร็จใน Bootstrap 3 ด้วยรหัสต่อไปนี้:

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

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

โดยทั่วไปเมื่อคุณมีคำถามเกี่ยวกับปัญหาการเว้นวรรค / การเว้นวรรคลองขวา + คลิก (หรือ cmd + คลิกที่ mac) องค์ประกอบและเลือก "ตรวจสอบองค์ประกอบ" ใน Chrome หรือ "ตรวจสอบองค์ประกอบด้วย firebug" บน Firefox ลองเลือกองค์ประกอบ HTML ที่แตกต่างกันในแผง "องค์ประกอบ" และแก้ไข CSS ทางด้านขวาในแบบเรียลไทม์จนกว่าคุณจะได้รับช่องว่างภายใน / ระยะห่างที่คุณต้องการ

นี่คือตัวอย่างสด

นี่คือลิงค์ไปยังซอ

— คริสเจ
แหล่งที่มา

12

ฉันยังต้องการเพิ่มการmargin: 0 .modal-dialog

— harrison4

10

BTW: .modal-contentสูงขึ้นเมื่อเนื้อหาล้นที่ด้านล่างและเลื่อนลง ควรเป็นmin-height: 100%; height: auto;

— Yanick Rochon

3

หากออกแบบสำหรับแอพมือถือคุณสามารถใส่ Chris 'CSS ลงในเคียวรีสื่อเพื่อให้มีความกว้างเป็นกิริยาช่วยตามปกติสำหรับหน้าจอที่กว้างขึ้น @media (ความกว้างสูงสุด: 768px) {... }

— Nicolas Connault

คุณสามารถเพิ่ม. modal {padding: ... px} หากคุณต้องการ modal เกือบเต็มหน้าจอ

— andrii

8

.modal-dialogยังมีความต้องการmax-width: 100%;สำหรับบูต 4

— อานันท์ Rockzz

25

การแก้ปัญหาที่เลือกไม่ได้รักษารูปแบบมุมรอบ เพื่อรักษามุมโค้งมนคุณควรลดความกว้างและความสูงเล็กน้อยแล้วลบรัศมีเส้นขอบ 0 นอกจากนี้มันจะไม่แสดงแถบเลื่อนแนวตั้ง ...

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

.modal-content {
  height: 99%;
}

— เอสเตบัน
แหล่งที่มา

1

คำตอบที่ถูกต้องมากขึ้นที่ยังคงความรู้สึกของแบบจำลองที่มีมุมโค้งมนคำตอบที่ยอมรับนำเสนอเลเยอร์ซ้อนทับแทนคำกริยา

— Clain Dsilva

หากเป็นกิริยาช่วยครอบครองแบบเต็มหน้าจอมันจะดูน่ากลัว (IMHO) ถ้าคุณมีรอบมุมรอบ

— Dementic

16

สำหรับ bootstrap 4 ฉันต้องเพิ่มเคียวรีสื่อบันทึกด้วยความกว้างสูงสุด: none

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

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

.modal-content {
  height: 99%;
}

— A. Morel
แหล่งที่มา

16

ฉันคิดวิธีตอบสนองแบบ "เต็มหน้าจอ":

Modals แบบเต็มหน้าจอที่สามารถเปิดใช้งานในจุดพักบางอย่างเท่านั้น ด้วยวิธีนี้modal จะแสดง "ปกติ" บนหน้าจอที่กว้างขึ้น (เดสก์ท็อป) และเต็มหน้าจอบนหน้าจอขนาดเล็ก (แท็บเล็ตหรือมือถือ)ทำให้รู้สึกถึงแอพที่มีอยู่ในตัว

นำมาใช้สำหรับเงินทุน 3และเงินทุน 4

Bootstrap v4

รหัสทั่วไปต่อไปนี้ควรใช้งานได้:

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

โดยการรวมโค้ด scss ด้านล่างมันจะสร้างคลาสต่อไปนี้ที่จำเป็นต้องเพิ่มลงใน.modalองค์ประกอบ:

+---------------+---------+---------+---------+---------+---------+
|               |   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 คือ:

@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: https://codepen.io/andreivictor/full/MWYNPBV/

Bootstrap v3

จากการตอบกลับก่อนหน้าสำหรับหัวข้อนี้ (@Chris J, @kkarli) รหัสทั่วไปต่อไปนี้ควรใช้งานได้:

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

หากคุณต้องการใช้โมเดอเรเตอร์แบบเต็มจอที่ตอบสนองได้ให้ใช้คลาสต่อไปนี้ที่จำเป็นต้องเพิ่มใน.modalองค์ประกอบ

.modal-fullscreen-md-down- 1200pxคำกริยาจะเต็มหน้าจอสำหรับหน้าจอมีขนาดเล็กกว่า
.modal-fullscreen-sm-down- 922pxคำกริยาจะเต็มหน้าจอสำหรับหน้าจอมีขนาดเล็กกว่า
.modal-fullscreen-xs-down- 768pxคำกริยาจะเต็มหน้าจอสำหรับหน้าจอที่มีขนาดเล็กกว่า

ดูรหัสต่อไปนี้:

/* 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;
  }
}

การสาธิตที่มีอยู่ใน Codepen: https://codepen.io/andreivictor/full/KXNdoO

ผู้ที่ใช้ Sass เป็นตัวประมวลผลล่วงหน้าสามารถใช้ประโยชน์จากมิกซ์อินต่อไปนี้:

@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
แหล่งที่มา

11

คลาสต่อไปนี้จะทำให้เป็นกิริยาช่วยแบบเต็มหน้าจอใน Bootstrap:

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

ฉันไม่แน่ใจว่าเนื้อหาภายในของโมดอลของคุณมีโครงสร้างอย่างไรซึ่งอาจมีผลต่อความสูงโดยรวมขึ้นอยู่กับ CSS ที่สัมพันธ์กับมัน

— micjamking
แหล่งที่มา

.fullscreen คืออะไร ฉันรวม css ใน #myModal มันใช้งานได้กับความกว้าง แต่ไม่ใช่ความสูง

— Hrishikesh Sardar

.fullscreenเป็นคลาสที่ฉันสร้างขึ้นเพื่อแก้ไขปัญหา แต่ไม่รวมอยู่ใน Bootstrap คุณสามารถโพสต์ตัวอย่างรหัสของคุณบนJSFiddleหรือCodePen ได้หรือไม่? ฉันไม่สามารถช่วยคุณได้หากไม่เห็นรหัสของคุณ

— micjamking

สำหรับการเพิ่มความสูงคุณต้องเพิ่มความสูงในโมเดลร่างกายไม่ได้อยู่ใน #myModal

— QasimRamzan

9

สำหรับ bootstrap 4

เพิ่มคลาส:

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

และใน HTML:

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

— Vlad
แหล่งที่มา

7

ตัวอย่างข้อมูลจาก @ Chris J มีบางประเด็นที่มีอัตรากำไรขั้นต้นและล้น การเปลี่ยนแปลงที่เสนอโดย @YanickRochon และ @Joana ตาม fiddel จาก @Chris J สามารถพบได้ในjsfiddleต่อไปนี้ jsfiddle

นั่นคือรหัส CSS ที่เหมาะกับฉัน:

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

— kkarli
แหล่งที่มา

2

คุณต้องตั้งค่าแท็ก DIV ของคุณดังต่อไปนี้

ค้นหารายละเอียดเพิ่มเติม> 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
แหล่งที่มา

-1

ความหลากหลายของโซลูชัน: (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
แหล่งที่มา

-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
แหล่งที่มา

2

พยายามอธิบายให้ชัดเจนยิ่งขึ้นว่าทำไมนี่คือคำตอบของคำถาม

— Jeroen Heier

-1

ใช้สิ่งนี้:

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

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

และอื่น ๆ :

<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
แหล่งที่มา