ทวิตเตอร์ bootstrap โมดอลเลื่อนได้

ฉันใช้ twitter bootstrap สำหรับโปรเจ็กต์ที่ฉันกำลังทำอยู่

ฉันมีหน้าต่างโมดอลที่มีรูปแบบค่อนข้างยาวกว่าและฉันไม่ชอบเมื่อหน้าต่างมีขนาดเล็กเกินไปโมดอลจะไม่เลื่อน (ถ้าเพิ่งหายไปจากหน้าของฉันซึ่งไม่สามารถเลื่อนได้)

ในการแก้ไขปัญหานี้ฉันใช้ css ต่อไปนี้

.modal {
    overflow-y:auto;
    max-height:90%;
    margin-top:-45%;
}

วิธีนี้ใช้งานได้ตามที่ฉันต้องการใน Chrome (นั่นคือแบบฟอร์มเป็นขนาดเต็มเมื่อหน้าต่างมีขนาดใหญ่พอ แต่เมื่อหน้าต่างหดตัวโมดอลจะหดตัวและเลื่อนได้) ปัญหาคือใน IE โมดอลปิดหน้าจอ ใครมีวิธีแก้ปัญหาที่ดีกว่านี้บ้าง?

ตัวอย่างของฉันสามารถพบได้ที่ tinyhousemap.com (คลิก 'เพิ่มรายการลงในแผนที่' ในหน้าต่างนำทางเพื่อให้โมดอลปรากฏขึ้น)

ขอบคุณ

วิธีแก้ปัญหาด้านล่างเป็นอย่างไร? มันได้ผลสำหรับฉัน ลองสิ่งนี้:

.modal .modal-body {
    max-height: 420px;
    overflow-y: auto;
}

รายละเอียด:

1. ลบoverflow-y: auto;หรือoverflow: auto;จากคลาส. modal (สำคัญ)
2. ลบออกmax-height: 400px;จาก.modalชั้นเรียน (สำคัญ)
3. เพิ่มmax-height: 400px;เป็น. modal .modal-body (หรืออะไรที่เคยมีก็ได้420pxหรือน้อยกว่า แต่จะไม่เกิน450px )
4. เพิ่มoverflow-y: auto;ไปที่.modal .modal-body

เสร็จแล้วมีเพียงร่างกายเท่านั้นที่จะเลื่อน

ฉันได้ทำโซลูชันเล็ก ๆ โดยใช้ jQuery เท่านั้น

ขั้นแรกคุณต้องเพิ่มคลาสเพิ่มเติมให้กับ<div class="modal-body">I ที่เรียกว่า "ativa-scroll" จึงจะกลายเป็นดังนี้:

<div class="modal-body ativa-scroll">

ตอนนี้เพียงแค่ใส่โค้ดนี้ในหน้าของคุณใกล้กับการโหลด JS ของคุณ:

<script type="text/javascript">
  $(document).ready(ajustamodal);
  $(window).resize(ajustamodal);
  function ajustamodal() {
    var altura = $(window).height() - 155; //value corresponding to the modal heading + footer
    $(".ativa-scroll").css({"height":altura,"overflow-y":"auto"});
  }
</script>

ฉันทำงานได้อย่างสมบูรณ์แบบสำหรับฉันและในวิธีที่ตอบสนอง! :)

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

สิ่งนี้ใช้ได้กับ Bootstrap 3 ที่ไม่มีรหัส JS และตอบสนองได้ดี

ที่มา

ลองและลบล้าง bootstrap ของ:

 .modal {
position: fixed;

ด้วย:

.modal {
position: absolute;

มันได้ผลสำหรับฉัน

ฉันยังเพิ่ม

.modal { position: absolute; }

ไปที่สไตล์ชีตเพื่อให้กล่องโต้ตอบเลื่อนได้ แต่ถ้าผู้ใช้ย้ายลงไปที่ด้านล่างของหน้าที่ยาวโมดอลอาจซ่อนอยู่ด้านบนของพื้นที่ที่มองเห็นได้

ฉันเข้าใจว่านี่ไม่ใช่ปัญหาใน bootstrap 3 อีกต่อไป แต่กำลังมองหาการแก้ไขที่ค่อนข้างรวดเร็วจนกว่าเราจะอัปเกรดฉันจึงลงเอยด้วยการข้างต้นและเรียกสิ่งต่อไปนี้ก่อนที่จะเปิดโมดอล

$('.modal').css('top', $(document).scrollTop() + 50);

ดูเหมือนจะมีความสุขใน FireFox, Chrome, IE10 8 & 7 (เบราว์เซอร์ที่ฉันต้องใช้)

โมดอลของคุณถูกซ่อนอยู่ใน firefox และนั่นเป็นเพราะการประกาศระยะขอบเชิงลบที่คุณมีในสไตล์ชีททั่วไปของคุณ:

.modal {
    margin-top: -45%; /* remove this */
    max-height: 90%;
    overflow-y: auto;
}

ลบขอบลบและทุกอย่างทำงานได้ดี

ในกรณีที่ใช้.modal {overflow-y: auto;}จะสร้างแถบเลื่อนเพิ่มเติมทางด้านขวาของหน้าเมื่อเนื้อหาล้นแล้ว

การทำงานรอบนี้คือการเอาน้ำล้นจากร่างกายแท็กชั่วคราวและชุดกิริยาล้น-Yเพื่ออัตโนมัติ

ตัวอย่าง:

$('.myModalSelector').on('show.bs.modal', function () {

        // Store initial body overflow value
        _initial_body_overflow = $('body').css('overflow');

        // Let modal be scrollable
        $(this).css('overflow-y', 'auto');
        $('body').css('overflow', 'hidden');


    }).on('hide.bs.modal', function () {

        // Reverse previous initialization
        $(this).css('overflow-y', 'hidden');
        $('body').css('overflow', _initial_body_overflow);
});

ปัญหาเกี่ยวกับโซลูชัน CSS ของ @ grenoult (ซึ่งส่วนใหญ่ใช้งานได้) คือมันตอบสนองได้เต็มที่และบนมือถือเมื่อแป้นพิมพ์ปรากฏขึ้น (เช่นเมื่อคลิกที่อินพุตในกล่องโต้ตอบโมดอล) ขนาดหน้าจอจะเปลี่ยนไปและกล่องโต้ตอบโมดอลจะเปลี่ยนไป การเปลี่ยนแปลงขนาดและสามารถซ่อนอินพุตที่เพิ่งคลิกเพื่อไม่ให้เห็นสิ่งที่กำลังพิมพ์

ทางออกที่ดีกว่าสำหรับฉันคือใช้ jquery ดังนี้:

$(".modal-body").css({ "max-height" : $(window).height() - 212, "overflow-y" : "auto" });

มันไม่ตอบสนองต่อการเปลี่ยนขนาดหน้าต่าง แต่ก็ไม่ได้เกิดขึ้นบ่อยนัก

ฉันสามารถเอาชนะสิ่งนี้ได้โดยใช้เมตริก "vh" ที่มีความสูงสูงสุดในองค์ประกอบ. modal-body 70vh ดูเหมาะสมกับการใช้งานของฉัน จากนั้นตั้งค่า overflow-y เป็นอัตโนมัติเพื่อให้เลื่อนเมื่อจำเป็นเท่านั้น

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}

สิ่งนี้จะไม่ได้ผลตามที่คาดไว้ .. วิธีที่ถูกต้องคือการเปลี่ยนตำแหน่ง: fixed to position: absolute สำหรับ. modal class