Bootstrap modal ปรากฏภายใต้พื้นหลัง

576

ฉันใช้รหัสสำหรับ modal โดยตรงจากตัวอย่าง Bootstrap และรวมเฉพาะ bootstrap.js (ไม่ใช่ bootstrap-modal.js) อย่างไรก็ตามคำกริยาของฉันปรากฏใต้จางสีเทา (ฉากหลัง) และไม่สามารถแก้ไขได้

นี่คือสิ่งที่ดูเหมือนว่า:

ซ่อนเร้นอยู่เบื้องหลัง

ดูซอนี้สำหรับวิธีหนึ่งในการทำให้เกิดปัญหานี้อีกครั้ง โครงสร้างพื้นฐานของรหัสนั้นเป็นดังนี้:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

ความคิดใดที่เป็นสาเหตุหรือสิ่งที่ฉันสามารถแก้ไขได้

javascript  css  twitter-bootstrap  modal-dialog 
— natlines
แหล่งที่มา
ในกรณีที่มีคนค้นหาแท็กเปิดบางครั้งและพยายามหาสาเหตุว่าเกิดอะไรขึ้นสำหรับฉันมันเป็นส่วนขยายของโครเมียม Feedly ที่ทำให้โมดอลของฉันพัง การปิดใช้งานส่วนขยายจะส่งคืนพฤติกรรมเป็นปกติ
— สาม
ในกรณีที่อาจเกิดปัญหาบน iOS และเกิดจากoverflow-x: hiddenการนำไปใช้กับคอนเทนเนอร์ของคำกริยา
— idmean
1
สร้าง 3 ตัวอย่างจาก 3 เวอร์ชัน 3.3.1 ทำงานได้ดีและอื่น ๆ ทำไม่ได้ รุ่น 3.3.1 jsfiddle เวอร์ชัน 3.3.5 jsfiddle เวอร์ชัน 3.3.6 jsfoddle
— Dimitry
1
สร้างรายงานข้อผิดพลาดกับทีม Bootstrap ดูเหมือนว่านี่ไม่ใช่ข้อผิดพลาดจริง ๆ แม้แต่คิดว่ามันทำงานได้ดีใน 3.3.1 คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในลิงค์ที่ฉันโพสต์
— Dimitry
บล็อกโพสต์ที่เกี่ยวข้องกับใครก็ตามที่ประสบปัญหานี้weblog.west-wind.com/posts/2016/Sep/14/…

คำตอบ:

629

หากคอนเทนเนอร์กิริยามีตำแหน่งคงที่หรือสัมพันธ์หรืออยู่ในองค์ประกอบที่มีตำแหน่งคงที่หรือสัมพันธ์ลักษณะการทำงานนี้จะเกิดขึ้น

ตรวจสอบให้แน่ใจว่าคอนเทนเนอร์โมดอลและองค์ประกอบหลักทั้งหมดอยู่ในตำแหน่งที่เป็นค่าเริ่มต้นเพื่อแก้ไขปัญหา

ต่อไปนี้เป็นสองวิธีในการทำสิ่งนี้:

  1. วิธีที่ง่ายที่สุดคือการย้าย dival modal ดังนั้นมันจึงอยู่นอกองค์ประกอบที่มีการวางตำแหน่งพิเศษ </body>หนึ่งในสถานที่ที่ดีอาจจะมีเพียงก่อนแท็กร่างกายปิด
  2. หรือคุณสามารถลบposition:คุณสมบัติ CSS จาก modal และบรรพบุรุษของมันได้จนกว่าปัญหาจะหายไป อย่างไรก็ตามวิธีนี้อาจเปลี่ยนรูปลักษณ์และหน้าที่ของเพจ
— Muhd
แหล่งที่มา
24
จับดี. FYI ไม่ใช่เพียงแค่ "แก้ไข" ตำแหน่งของผู้ปกครอง "ญาติ" ที่ทำให้เกิดปัญหานี้เช่นกัน
— Giang Nguyen
3
@Muhd คุณแน่ใจได้อย่างไรและองค์ประกอบหลักทั้งหมดอยู่ในตำแหน่งที่เป็นค่าเริ่มต้น
— indago
4
ต้องการใช้ตัวเลือกที่หนึ่ง: "เพียงแค่ย้าย modal div ดังนั้นมันจึงอยู่นอกองค์ประกอบที่มีการวางตำแหน่งพิเศษ" ขอบคุณ
— mpgn
9
ฉันไม่เข้าใจคำตอบนี้ ตัวอย่าง Bootstrap แสดง dival modal ที่มีจำนวนคลาสตามบรรทัดของ "modal", "modal-fade" ฯลฯ ภายใน. modal มันกำหนดตำแหน่ง: คงที่และภายใน "modal-body" มันกำหนดตำแหน่ง: ญาติ ดังนั้นการเคลื่อนย้าย modal container จะเปลี่ยนแปลงอะไรอย่างไรเมื่อ. mod ตั้งค่า position: fixed?
— Carlos
4
ฉันยังคงมีปัญหานี้อยู่ ฉันเพิ่มไว้ก่อนหน้านี้</body>และbodyไม่มีpositionสไตล์ attrib ใด ๆ ความคิดอื่น ๆ ?
— Tuan Anh Tran
383

ปัญหาเกี่ยวข้องกับการวางตำแหน่งของคอนเทนเนอร์หลัก คุณสามารถ "ย้าย" คำกริยาของคุณออกจากภาชนะเหล่านี้ก่อนที่จะแสดง ต่อไปนี้เป็นวิธีทำหากคุณกำลังshowใช้คำสั่ง js:

$('#myModal').appendTo("body").modal('show');

หรือถ้าคุณเปิดใช้งานเป็นกิริยาช่วยโดยใช้ปุ่มปล่อย.modal('show');และทำ:

$('#myModal').appendTo("body")

สิ่งนี้จะทำให้การทำงานปกติทั้งหมดช่วยให้คุณแสดงคำกริยาโดยใช้ปุ่ม

— อดัมไบรท์
แหล่งที่มา
12
ใช้ตัวจัดการเหตุการณ์ทั่วไปนั้นเพื่อให้โซลูชัน @leandrotk ใช้งานได้กับทุก modals ที่คุณมีได้ในหน้า $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Patrick M.
2
@PatrickM ! ที่น่าตื่นตาตื่นใจ ที่ได้ผลเช่นเดียวกับเสน่ห์ในโครงการเก่าที่ฉันเข้าครอบครอง
— denislexic
5
ใช้งานได้ดีเมื่อคุณไม่สามารถแก้ไขตำแหน่ง CSS ได้ ขอบคุณ :)
— alexcasalboni
มีเหตุผลที่ฉันหลวมการจัดรูปแบบ CSS ทั้งหมดเมื่อฉันทำเช่นนี้? และแก้ไขได้ง่ายหรือไม่ :-)
— Eugene van der Merwe
1
จากคำตอบ leandrotk เพียงแค่เปลี่ยน #myModal เป็น. modal เป็นแบบนี้: $ ('. modal'). appendTo ("body") สิ่งนี้จะทำงานกับโมดัลทั้งหมดเนื่องจากมีโมดัลคลาสเริ่มต้น
— Ngatia Frankline
170

ฉันลองตัวเลือกทั้งหมดที่ให้ไว้ข้างต้น แต่ไม่ได้ใช้งาน

สิ่งที่ทำงาน:การตั้งค่าดัชนี z ของ. modal-Backdrop เป็น -1

.modal-backdrop {
  z-index: -1;
}
— Jan van der Burgt
แหล่งที่มา
10
สิ่งนี้ทำงานได้อย่างสมบูรณ์และเป็นทางออกที่ง่ายที่สุด ฉันใช้z-index: 0;
— andrewcockerham
ยังสามารถยืนยันได้ว่ามีเพียงตัวเลือกนี้เท่านั้นที่ใช้งานได้! ขอบคุณ!
— เรือเฟอร์รี่ Kranenburg
ขอบคุณ! นี่เป็นข้อบกพร่องของ BS3 หรือไม่?
— mauriblint
1
วิธีนี้ใช้ไม่ได้หากคุณใช้ชุดรูปแบบที่มีดัชนี z หลากหลาย ตัวอย่างเช่นการตั้งค่าฉากหลังที่-1จะทำให้มันปรากฏด้านหลังองค์ประกอบอื่น ๆ ในหน้าเช่นแผง แต่การตั้งค่าให้3ทำเหนือสิ่งอื่นใดยกเว้นป๊อปอัพคำกริยา
— Justin Skiles
1
ฉันพบว่านี่เป็นวิธีที่เร็วที่สุดเช่นกันหลังจากหมดข้อเสนอแนะในคำตอบที่ให้คะแนนสูงกว่าด้านบน ในกรณีของฉันการตั้งค่า div ด้วยคลาสไดอะล็อก modal เป็น z-index ของ 1,060 ที่มันโผล่ขึ้นมาด้านหน้า overlay หากคุณใช้ navbar คุณจะต้องย้าย modal ด้านบน overlay และไม่ใช่วิธีอื่นมิฉะนั้น navbar ของคุณอาจปรากฏขึ้นด้านบนของ overlay ... chaos insues ...
— Mike Devenney
152

ตรวจสอบให้แน่ใจว่า BootStrap css และ js เป็นเวอร์ชั่นเดียวกัน รุ่นที่แตกต่างกันยังสามารถทำให้เป็นกิริยาช่วยปรากฏภายใต้พื้นหลัง:

ตัวอย่างเช่น:

แย่:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

ดี:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— ซิด
แหล่งที่มา
นี่มันสำหรับฉันด้วย ขอบคุณ!
— PedroTanaka
เพิ่งมีปัญหาเดียวกันวิธีแก้ไขสไตล์ชีทเวอร์ชันเดียวกันดูเหมือนว่าจะช่วยทุกคน! ขอบคุณ
— HGB
ขอบคุณนี่เป็นปัญหาที่แน่นอนของฉัน
— Malcor
มัลคอร์ไม่มีปัญหาฉันใช้เวลามากในขณะที่ฉันพบข้อผิดพลาดนี้ ดังที่เราเห็นใน '14 ตอนนี้คือ '16 ข้อผิดพลาดยังคงมีอยู่ จริงนี้ไม่ได้เป็นปัญหา แต่ในบูตผู้เขียนควรเพิ่มนี้ลงในเอกสารหรือสิ่งที่พวกเขา ..
— ซิด
ดีลเดียวกันที่นี่เราเปลี่ยนมาสร้าง SASS ของเราและลืมไฟล์ js โดยสมบูรณ์ .. นี่ต้องเป็นคำตอบสูงสุด .. เนื่องจาก modal ของเรามักจะรวมอยู่ก่อนแท็กปิดร่างกาย ...
— Angry 84
116

ฉันยังพบปัญหานี้และไม่มีวิธีแก้ปัญหาใดที่เหมาะกับฉันจนกว่าฉันจะพบว่าจริง ๆ แล้วฉันไม่ต้องการฉากหลัง คุณสามารถนำฉากหลังออกได้อย่างง่ายดายด้วยรหัส folowing

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

หมายเหตุ : data-backdropต้องตั้งค่าแอตทริบิวต์เป็นfalse( ตัวเลือกอื่น ๆ : staticหรือtrue)

— PieterVK
แหล่งที่มา
2
โดยวิธีที่ง่ายที่สุดและใช้งานได้อย่างมีเสน่ห์!
— learning_to_swim
ยอดเยี่ยม! ฉันต้องมี bootstrap ด้วย - ไม่แน่ใจว่าทำไมฟังก์ชั่น Bootstrap อื่น ๆ ของฉันถึงทำงานได้ดี
— สตีฟไคลน์
สมบูรณ์แบบ !!! ดิ้นรนหนึ่งวันและคุณช่วยฉันอีกวันหนึ่งแล้ว ขอขอบคุณอีกครั้ง .. +1 และไชโย
— Bhaskara
1
หลังจากอ่านวิธีแก้ปัญหาทั้งหมดอย่างถี่ถ้วนฉันพบว่านี่เป็นวิธีที่เหมาะสมที่สุดในรุ่น bootstrap และ jQuery ในปัจจุบัน ขอบคุณ.
— เข้ารหัส
3
ขอบคุณ! คำถามนี้มีมุมมองมากกว่า 140k และฉันไม่เข้าใจว่าทำไม bootstrap ไม่สามารถแก้ไขได้ โอ้โห
— ชาด
58

ฉันได้มันมาทำงานโดยให้ค่า z-index สูงกับหน้าต่างโมดัลหลังจากเปิดมัน เช่น:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— Andrew Dyster
แหล่งที่มา
มันใช้งานได้หรือไม่ (ชายคนนั้นบอกว่าเป็น) ทำไมคุณถึงลงคะแนน? ขณะที่ฉันกำลังมองดูเหมือนว่ามันจะ
— Rolice
ใช่ใครช่วยอธิบายหน่อยได้ไหมว่าทำไมนี่เป็นคำตอบที่ไม่ดี มันเป็นแค่การแฮ็กหรือเปล่า?
— brandones
6
ฉันไม่เข้าใจคะแนนลง ใช่มันเป็นเรื่องแฮ็ก แต่โซลูชันอื่น ๆ ใช้ไม่ได้สำหรับฉันดังนั้นฉันคิดว่าฉันจะสนับสนุนสิ่งนี้ให้กับคนที่ไม่สนใจการใช้โซลูชัน "แฮ็ค" เพื่อรับสิ่งที่น่ารังเกียจในการทำงาน
— Andrew Dyster
นี่เป็นข้อมูลเชิงลึกที่เกี่ยวข้องกับปัญหาเฉพาะของฉันโดยวาง modal ไว้บนองค์ประกอบเต็มหน้าจอ +1
— Jack Stone
3
มันเป็นคำตอบที่ไม่ดีเพราะเป็นแฮ็คและไม่ได้พยายามระบุสิ่งนี้ คำตอบอื่น ๆ พูดว่า "หากไม่มีสิ่งใดที่คุณสามารถทำได้ ... " ความจริงก็คือ modal ใช้กันอย่างแพร่หลายทั่วทั้งเว็บและควรจะทำงานหากดำเนินการอย่างถูกต้อง คำตอบที่แฮ็กไม่ได้ช่วยให้ผู้คนหาวิธีทำสิ่งที่ถูกต้อง
— Lukos
35

โซลูชันที่ให้บริการโดย @Muhd เป็นวิธีที่ดีที่สุดในการดำเนินการ แต่ถ้าคุณติดอยู่ในสถานการณ์ที่ไม่มีการเปลี่ยนแปลงโครงสร้างของหน้าให้เลือกใช้เคล็ดลับนี้:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

เคล็ดลับในที่นี่คือdata-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" การลบฉากหลังเริ่มต้นและสร้างหุ่นจำลองโดยการตั้งค่าสีพื้นหลังของกล่องโต้ตอบด้วยอัลฟา

อัปเดต 1: ตามที่ระบุโดย @Gustyn ว่าการคลิกบนพื้นหลังไม่ได้ปิดกล่องโต้ตอบตามที่คาดไว้ ดังนั้นเพื่อให้บรรลุว่าคุณต้องเพิ่มรหัสสคริปต์จาวา นี่คือตัวอย่างบางส่วนที่คุณสามารถทำได้ 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— Krishnendu
แหล่งที่มา
การทำงานนี้ยกเว้นว่าการคลิกบนพื้นหลังไม่ได้ปิดกล่องโต้ตอบตามที่คาดไว้
— Gustyn
Krishnendu คุณเป็นฮีโร่ของฉัน ฉันมาทำงานด้วยความหายนะและความเศร้าใจ 3 วันก่อนงานนำเสนอครั้งสุดท้ายของฉันที่จะต้องเผชิญกับปัญหานี้อย่างฉับพลันทั้งหมดคือการทำลายเส้นประสาทที่จะพูดน้อย U เพื่อนของฉันสมควรได้รับอัปยศ 100000 อนิจจาสามารถให้คุณหนึ่ง :) มีวันที่มีความสุขที่ยอดเยี่ยม
— DotNetBeginner
เมื่อฉันลองทำสิ่งนี้มันจะไม่ครอบคลุมพื้นหลังทั้งหมดของหน้าเว็บ - แค่องค์ประกอบ div ที่มีการประกาศคำกริยา
— Sam Sam
ทำงานได้อย่างสมบูรณ์แบบ ขอบคุณ!
— gfernandes
ทำงานได้อย่างสมบูรณ์แบบ ขอบคุณ!
— Mayank Pandeyz
16

แต่สายนี้ แต่นี่เป็นทางออกทั่วไป -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

เยี่ยมชมลิงค์นี้ - Bootstrap 3 - Modal หายไปด้านล่างฉากหลังเมื่อใช้แถบข้างคงที่เพื่อดูรายละเอียด

— โรฮัน
แหล่งที่มา
นี่เป็นโซลูชันที่สมบูรณ์แบบสำหรับปลั๊กอิน Wordpress ที่ฉันสร้างซึ่งฉันไม่สามารถควบคุมองค์ประกอบหลักในธีมของคนอื่นได้
— Mark Rummel
ทางออกที่ดีที่สุด!
— digz6666
10

อีกวิธีในการเข้าใกล้สิ่งนี้คือการลบดัชนี z ออกจาก .modal-backdropใน bootstrap.css สิ่งนี้จะทำให้ฉากหลังอยู่ในระดับเดียวกับส่วนที่เหลือของร่างกายของคุณ (จะยังคงจางหายไป) และ modal ของคุณจะอยู่ด้านบน

.modal-backdrop หน้าตาแบบนี้

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— ซามูเอลเบอร์เกอร์
แหล่งที่มา
10

เพียงเพิ่ม CSS สองบรรทัด:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

.modal-backdrop ควรมีค่า 1,050 ค่าเพื่อตั้งค่าไว้เหนือ navbar

— Wahyu Primadi
แหล่งที่มา
ดี แต่ถ้าคอนเทนเนอร์ของโมดัลมีposition: fixedสิ่งนี้จะไม่ทำงาน
— CPHPython
10

สิ่งนี้จะครอบคลุมโมดัลทั้งหมดโดยไม่ทำให้ภาพเคลื่อนไหวหรือพฤติกรรมที่คาดหวังผิดเพี้ยนไป 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— Cam Tullos
แหล่งที่มา
1
โซลูชันระดับโลก อย่างไรก็ตามจะเป็นการดีกว่าที่จะพบปัญหา
— Milad Abooali
ฉันไม่คิดว่าจะเป็นวิธีแก้ปัญหาที่ดีเยี่ยมหน้าเกี่ยวกับการปรับเปลี่ยนมากมาย ได้รับยุ่ง
— เกลน
คุณช่วยอธิบายได้อย่างไรว่ามันจะยุ่งเหยิง? สิ่งที่มันทำคือการย้ายโมดัลจากที่มันอยู่ใน DOM ไปยังจุดสิ้นสุดของแท็กเนื้อหา มันไม่ได้สร้างอะไรที่ไม่ได้อยู่ที่นั่นแค่ขยับแล้วให้ดัชนี z-top อัตโนมัติ
— Cam Tullos
ทางออกที่ดีที่สุดที่ฉันคิดว่า ไม่จำเป็นต้องแก้ไข CSS ใด ๆ และเปลี่ยนลักษณะที่เป็นกิริยาช่วย
— Moslem7026
8

ฉันเพิ่งตั้ง:

#myModal {
    z-index: 1500;
}

และมันใช้งานได้ ...

สำหรับคำถามเดิม: 

.my-module {
    z-index: 1500;
}
— AmintaCode
แหล่งที่มา
ปัญหาของฉันคือดัชนี z ด้วย
— James Lock
8

ปัญหานี้มักจะเกิดขึ้นเมื่อใช้สิ่งต่าง ๆ เช่นการไล่ระดับสีใน CSS สำหรับสิ่งต่าง ๆ เช่นพื้นหลังหรือแม้แต่ส่วนหัวของหีบเพลง

น่าเสียดายที่การแก้ไขหรือลบล้าง Bootstrap หลักของ CSS นั้นเป็นสิ่งที่ไม่พึงปรารถนาและอาจนำไปสู่ผลข้างเคียงที่ไม่พึงประสงค์ได้ วิธีการล่วงล้ำน้อยที่สุดคือการเพิ่มdata-backdrop="false"แต่คุณอาจสังเกตเห็นว่าผลจางหายไม่ทำงานตามที่คาดไว้

หลังจากติดตาม Bootstrap รุ่นล่าสุดดูเหมือนว่ารุ่น 3.3.5 จะแก้ไขปัญหานี้โดยไม่มีผลข้างเคียงที่ไม่พึงประสงค์

ดาวน์โหลด: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

อย่าลืมรวมไฟล์ CSS และไฟล์ JavaScript จาก 3.3.5

— Richard Nalezynski
แหล่งที่มา
6

สวัสดีฉันมีปัญหาเดียวกันจากนั้นฉันก็รู้ว่าเมื่อคุณใช้ bootsrap 3.1 ซึ่งแตกต่างจาก bootsrap (2.3.2) รุ่นเก่ากว่าโครงสร้าง html ของคำกริยานั้นเปลี่ยนไป!

คุณต้องห่อเนื้อหาและส่วนหัวกิริยาของคุณด้วยคำพูดโต้ตอบและเนื้อหากิริยา 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— talsibony
แหล่งที่มา
+1 ตรวจสอบให้แน่ใจว่าคุณใช้ bootstrap.css และ bootstrap.js รุ่นที่เข้ากันได้และมาร์กอัปของคุณตรงกับรุ่นที่คุณใช้งานอยู่
— srayner
ใช่นี่คือสิ่งที่เป็นบทสรุปของฉันและฉันเขียนมันที่นี่ถ้าใครมีปัญหานี้
— talsibony
พระเยซูคริสต์คำตอบนี้ถูกฝังลึก กรณีเดียวกันสำหรับ Bootstrap 4
— Randell
6

วิธีแก้ปัญหาที่แนะนำข้างต้นไม่ได้ผลสำหรับฉัน แต่เทคนิคนี้แก้ไขปัญหาได้:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— Javed Iqbal
แหล่งที่มา
ฉันชอบวิธีนี้เพราะฉันทำฟอร์แมท CSS ด้วยวิธีอื่น ๆ
— Eugene van der Merwe
6

ฉันมีปัญหานี้และวิธีที่ง่ายที่สุดในการแก้ไขคือดัชนี addind มากกว่า 1,040 ใน div-dialog mod:

<div class="modal-dialog" style="z-index: 1100;">

ฉันเชื่อว่า bootstrap สร้าง div-modal-Backdrop จางหายไปซึ่งในกรณีของฉันมี z-index 1040 ดังนั้นถ้าคุณใส่ modal-dialog ไว้ด้านบนก็ไม่ควรเป็นสีเทาอีกต่อไป

— Chris Rosete
แหล่งที่มา
6

ฉันมีทางออกที่เบาและดีกว่า ..

มันสามารถแก้ไขได้อย่างง่ายดายผ่าน CSS บางสไตล์เพิ่มเติม ..

  1. ซ่อนคลาส.modal-backdrop(สร้างอัตโนมัติจาก Bootstrap.js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. ตั้งค่าพื้นหลังของ.modalเป็นภาพฉากหลังสีดำโปร่งแสง

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

สิ่งนี้จะได้ผลดีที่สุดหากคุณมีข้อกำหนดที่ต้องการให้ modal อยู่ภายในองค์ประกอบและไม่ใกล้กับ</body>แท็ก ..

— เจทีที
แหล่งที่มา
คุณบันทึกวันของฉัน ... นี่เป็นทางเลือกที่ดี!
— notme
@ xunga ไม่ต้องกังวล โปรดแบ่งปันวิธีแก้ปัญหานี้ให้ผู้อื่น :)
— Tee JM
คุณสามารถดูการแก้ไขได้ที่นี่ ... stackoverflow.com/posts/42887253/revisions
— notme
ขอบคุณ JM ทางออกของคุณเป็นสิ่งเดียวที่ใช้ได้ผลสำหรับฉัน
— Ahmed J.
5

ตั้งค่า z-index .modal เป็นค่าสูงสุด

ตัวอย่างเช่น. sidebarwrapper มี z-index 1100 ดังนั้นให้ตั้งค่า z-index ของ. modal เป็น 1101

.modal {
    z-index: 1101;
}
— Mohudum Kamil
แหล่งที่มา
5

ในกรณีของฉันแก้มันเพิ่มในสไตล์ชีทของฉัน:

.modal-backdrop{
  z-index:0;
}
ขยายตัวอย่างข้อมูล

ด้วย google debugger สามารถตรวจสอบองค์ประกอบ BACKDROP และปรับเปลี่ยนแอตทริบิวต์ โชคกูเกิล

— Ckevyn Ovalle
แหล่งที่มา
3

ใน navbar ของคุณnavbar-fixed-topต้องการz-index = 1041 และถ้าคุณใช้bootstarp-combined.min.cssยังเปลี่ยน .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— Mohsin
แหล่งที่มา
3

คุณยังสามารถลบดัชนี z ออกจาก. mod-Backdrop css ผลลัพธ์จะมีลักษณะเช่นนี้

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— Matthew Gallegos
แหล่งที่มา
3

ฉันลบฉากหลังเป็นกิริยาช่วย

.modal-backdrop {
    display:none;
}

นี่ไม่ใช่ทางออกที่ดีกว่า แต่ใช้ได้สำหรับฉัน

— CodeBriefly
แหล่งที่มา
3

สิ่งที่ฉันพบคือ:

ใน bootstrap 3.3.0 มันไม่ถูกต้อง แต่เมื่ออยู่ใน bootstrap 3.3.5 มันถูกต้องดูรหัส 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ttong
แหล่งที่มา
3

เพิ่มอันนี้ไว้ในหน้าคุณ มันใช้งานได้สำหรับฉัน

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— Takei
แหล่งที่มา
3

ฉันได้รับการแก้ไขโดยเพิ่มสไตล์ด้านล่างลงในแท็ก DIV

style="background-color: rgba(0, 0, 0, 0.5);"

และเพิ่ม CSS ที่กำหนดเอง

.modal-backdrop {position: relative;}
— RaymondLe
แหล่งที่มา
3

สำหรับฉันทางออกที่ง่ายที่สุดคือใส่คำกริยาของฉันไว้ในเสื้อคลุมที่มีตำแหน่งสัมบูรณ์และดัชนี z สูงกว่า. mod ฉากหลัง เนื่องจาก modal-Backdrop (อย่างน้อยในกรณีของฉัน) มี z-index 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
ขยายตัวอย่างข้อมูล

— sivi911
แหล่งที่มา
ดัชนี z ใช้ได้สำหรับฉัน ขอบคุณมาก.
— ราวกับ
2

ในกรณีของฉันฉันมีเสื้อคลุมต่อไปนี้:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

ลบดัชนี z เท่านั้น: 1 และไม่ทราบว่าทำไมแก้ไขปัญหา นอกจากนี้เพื่อลบตำแหน่งสัมพัทธ์แน่นอน แต่ฉันต้องการมัน

— hsobhy
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.