Bootstrap modal: พื้นหลังกระโดดขึ้นไปด้านบนเพื่อสลับ

111

ฉันมีปัญหากับกิริยา ฉันมีปุ่มบนหน้าซึ่งจะสลับโมดอล เมื่อโมดอลปรากฏขึ้นหน้าจะกระโดดขึ้นไปด้านบน

ฉันทำทุกอย่างเท่าที่ทำได้เพื่อหาทางแก้ไข / ฯลฯ แต่ฉันหลงทางจริงๆ

แก้ไข:

ฉันได้ลองด้วย: $('#myModal').modal('show');แต่มันก็มีผลเช่นเดียวกัน

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

สวัสดี Benni ใช่ฉันท้าทาย ฉันได้ลองด้วย: $ ('# myModal'). modal ('show'); แต่ก็มีผลเช่นเดียวกัน

— FooBar

1

สิ่งนี้ช่วยคุณได้ไหมปัญหาเดียวกัน: stackoverflow.com/questions/12894570/…

— มาร์ค

@ มาร์คดูคำตอบของฉันด้านล่าง ...

— Ravimallya

ฉันสังเกตว่าถ้าฉันคลิกที่ใดก็ได้ในwindowโมดอลนั้นจะเริ่มทำงาน ดูเหมือนจะเป็นเรื่องแปลกที่ไม่คาดคิด ฉันลบbuttonผ่านทาง devtools และการคลิกที่ใดก็ได้บนหน้ายังคงเปิดหน้าต่างโมดอล เป็นพฤติกรรมที่ต้องการหรือไม่? ฉันสงสัยว่าคุณไม่มีตัวเลือกที่ถูกต้องสำหรับเหตุการณ์คลิกโมดอล

— dward

174

เมื่อโมดอลเปิดmodal-openคลาสจะถูกตั้งค่าเป็น<body>แท็ก คลาสนี้กำหนดoverflow: hidden;ให้ร่างกาย เพิ่มกฎนี้ในสไตล์ชีตของคุณเพื่อลบล้างสไตล์ bootstrap.css:

body.modal-open {
    overflow: visible;
}

ตอนนี้เลื่อนควรอยู่ในสถานที่

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

@pstenstrm ฉันมีข้อสงสัย คุณบอกให้แทนที่ css สำหรับ. modal-open class แต่จะเกิดอะไรขึ้นถ้ามี div การปิดเพิ่มเติมและในคำตอบของฉันฉันไม่ได้ลบล้างคลาสใด ๆ ในความละเอียดของฉัน ทำงานได้ดีหลังจากลบ 2 div พิเศษ bs modal เพิ่ม. modal-backdrop div ซึ่งจะทำให้สับสนว่าต้องปิดตรงไหนเนื่องจากแท็กปิดเพิ่มเติม

— Ravimallya

4

ไม่ได้ผลสำหรับฉันฉันมีโมดอลภายใน iframe และมันกำลังเลื่อนไปด้านบน ... มีความคิดใดบ้าง?

— Cabuxa Mapache

5

สิ่งนี้แก้ไขให้ฉัน เพื่อเพิ่มรากของปัญหาของฉันคือ "body {height: 100%}"

— PeteG

23

ไม่ทำงานสำหรับฉัน ฉันมีวานิลลาโมดอลที่ฉันเปิดด้วย.modal('show')และมันยังคงเลื่อนไปที่ด้านบนของหน้า Bootstrap v3.2.0

— MandM

6

ฉันต้องเพิ่ม position: inheritในชั้นเรียนนี้ แต่ก็ทำงานได้อย่างมีเสน่ห์หลังจากนั้น

— adrian3martin

28

หากคุณกำลังเรียกโมดอลด้วยแท็ก ลองลบ "#" ออกจากแอตทริบิวต์ href และเรียกโมดอลพร้อมแอตทริบิวต์ข้อมูล

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

— โกคาน
แหล่งที่มา

ฉันเปิดมันเหมือนกับที่คุณโพสต์ไว้ตรงนั้น ตรวจสอบลิงค์

— FooBar

5

หากคุณไม่ได้ใช้ "<button>" แต่ <a> ในกรณีของฉันคุณจะสูญเสียไอคอน "ปุ่มนิ้ว" เมื่อคุณเลื่อนเคอร์เซอร์ของเมาส์ไปที่วัตถุ เพื่อเอาชนะสิ่งนี้ฉันได้ทำไปแล้ว: ... href = "# mai_modal_id" data-toggle = "modal" ... และฉันไม่ได้ใช้ data-target

— pagurix

3

@pagurix - ความคิดเห็นของคุณทำงานได้ดีที่สุดสำหรับสถานการณ์ของฉัน

— AlfredBr

ฉันคิดว่า @pagurix ควรเขียนความคิดเห็นของเขาเป็นคำตอบแยกต่างหาก สิ่งเดียวที่ช่วย ThumbsUp!

— Vibhor Dube

14

หากคุณใช้ anchor tag <a href"#" ..> ... </a>และhref="#"กำลังสร้างปัญหาให้ลบสิ่งนั้นออก คุณสามารถอ่านเพิ่มเติมได้ที่นี่

— Nimesh Jain
แหล่งที่มา

12

$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

สิ่งนี้จะช่วยให้คุณหยุดแถบเลื่อนที่อยู่ด้านบนมันใช้ได้ผลสำหรับฉัน

— จอร์จิเมียร์ชอฟ
แหล่งที่มา

6

อาจทำงานกับ modals ที่ซ้อนอยู่ในโค้ด:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

สำหรับฉันมันเป็นการผสมผสานระหว่างตำแหน่งความสูงและความล้น

— เดนนิสไฮเดน
แหล่งที่มา

4

ฉันไม่เห็นข้อผิดพลาดเฉพาะ แต่ผมจะแนะนำให้คุณตรวจสอบไวยากรณ์ html ของคุณ

การทดสอบเล็กน้อยกับแหล่งที่มาของคุณทำให้ฉันมีข้อผิดพลาดเช่น

บรรทัด 127 คอลัมน์ 34: องค์ประกอบที่ไม่ได้ปิด div
              <div class="inner onlySides">

นี่อาจเป็นปัญหา

— บิลลี่โจ
แหล่งที่มา

ขอบคุณ - ฉันจะตรวจสอบสิ่งนี้แม้ว่าฉันจะพบว่ามันยากที่จะเชื่อว่าสิ่งนี้อาจทำให้เกิดปัญหาที่ฉันกำลังประสบอยู่ดูเหมือนว่าคุณกำลังใช้ปลั๊กอินเพื่อติดตามสิ่งนี้ - ถ้าเป็นเช่นนั้น ที่?

— FooBar

ฉันไม่ได้ใช้ปลั๊กอินยกเว้น firebug ก็มักจะเป็นสิ่งที่ดีที่จะตรวจสอบความถูกหน้าของคุณในvalidator.w3.org มันจะเป็นปัญหาเพราะถ้าคุณไม่เปิดเผย div คุณจะมีพฤติกรรมแปลก ๆ :)

— billyJoe

4

วิธีที่ง่ายที่สุดในการแก้ฉากหลังกระโดดคือกำหนดพารามิเตอร์สองตัว:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}

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

3

ฉันได้ลองจำลองปัญหานี้บน localhost ของฉันแล้วและแปลกอย่างที่เห็นมีข้อขัดแย้งกับไฟล์ Bootstrap JS ที่คุณใช้อยู่

ลองแสดงความคิดเห็นรหัสของคุณ:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

และใช้ Bootstrap 2.3.2 แทน:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

สิ่งนี้ทำให้ฉันได้ผล

ฉันลองใช้กับ Bootstrap เวอร์ชัน 3 แต่ไม่ได้ผล ฉันยังไม่สามารถระบุส่วนที่เป็นปัญหาได้ แต่มีบางแห่งที่ Firebug ทำให้ฉันเกิดe.preventDefault() is not a functionข้อผิดพลาด - ฉันเดาว่านี่น่าจะเป็นสาเหตุที่แท้จริง แต่ฉันยังไม่ได้เปรียบเทียบกับไฟล์ JS อื่น ๆ

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

3

ฉันพยายามตั้งค่า. modal ด้านบนตรงกลางหน้าจอ

.modal {
    position: absolute;
    top: 50%;
}

แค่ 2 เซ็นต์ของความคิดของฉัน

— โฮลเกอร์ธีบอช
แหล่งที่มา

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

— crafter

3

ใน bootstrap 3.1.1 ฉันแก้ไขด้วยวิธีนี้:

body.modal-open {
    position: absolute !important;
}

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

2

คุณบันทึกวันของฉันไว้ @Filo ขอบคุณมาก

— vinothini

2

คุณมีdivแท็กปิดพิเศษ 2 แท็กก่อนถึง<div id="footer">หรือหลัง<div id="mainFrame" class="group">div ฉันใช้ Visual Studio 2012 Express เพื่อตรวจสอบสิ่งนี้

โปรดลบ div พิเศษ 2 ตัวนี้ออกและแจ้งให้เราทราบว่ามันทำงานอย่างไร ฉันลบ div เพิ่มเติมและลบสคริปต์ที่กำหนดเองทั้งหมด เก็บไว้เฉพาะแกน jquery และ bootstrap ที่ส่วนท้าย นี่คือภาพหน้าจอของผลลัพธ์สุดท้าย นี่คือสนามเด็กเล่น jsbin สำหรับคุณซึ่งใช้งานได้ดี

ฉันแนะนำให้คุณใช้headjsเพื่อโหลดสคริปต์และไฟล์ css ทั้งหมด นอกจากนี้ยังไม่ใช่แนวปฏิบัติที่ดีในการโหลดสคริปต์ใด ๆ สองครั้ง

ใส่คำอธิบายภาพที่นี่

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

4

คำตอบที่ได้รับการโหวตต้องมีความคิดเห็นที่เหมาะสมพร้อมเหตุผล

— Ravimallya

2

ลองใช้สิ่งนี้เพื่อเปิดโมดอลและดูว่าเกิดอะไรขึ้น:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>

— สกู๊ตเตอร์
แหล่งที่มา

2

body.modal-open {
overflow: visible !important;
}

ฉันต้องการแอตทริบิวต์ที่สำคัญเพื่อแก้ไข

— เสียงดังฉ่า
แหล่งที่มา

สิ่งนี้ใช้ได้ผลสำหรับฉันและฉันมีปัญหาของ @ MandM (ในความคิดเห็น) จากคำตอบของ pstenstrm: "ไม่ได้ผลสำหรับฉันฉันมีโมดอลวานิลลาที่ฉันเปิดด้วย. modal ('show') และมันยังคงเลื่อนอยู่ ไปที่ด้านบนสุดของหน้า Bootstrap v3.2.0 " เอฟเฟกต์แปลก ๆ เพียงอย่างเดียวก็คือตอนนี้พื้นหลังจะเลื่อนถ้าคุณเลื่อนโมดอลที่สูงกว่าหน้าต่างไปเรื่อย ๆ แต่นี่เป็นปัญหาเล็กน้อยสำหรับฉัน ขอบคุณ.

— dgig

1

ฉันมีปัญหาเดียวกันกับการใช้ Bootstrap 2.3.2

มันเป็นปัญหาในการคลิกที่ลิงค์:

เคล็ดลับคือ: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

และ js:

function openModal() {
    $('#myModal').modal('show');
}

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

1

ฉันใช้เวลาหลายชั่วโมงในการลองทำทุกอย่างที่นี่และที่อื่น ๆ สำหรับการใช้งาน angularjs-material ปรากฎว่าฉันต้องปิดการใช้งานแอนิเมชั่นบนอ็อบเจ็กต์ uibModal.open config

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

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

หวังว่านี่จะช่วยคนอื่นได้

— นาธานบีช
แหล่งที่มา

1

หากคุณประสบปัญหานี้ในโปรแกรม Angular ให้เพิ่มโค้ดด้านล่างที่บรรทัดแรกของไฟล์. scss

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}

— Sibashankar แพนด้า
แหล่งที่มา

0

ฉันมีปัญหาเดียวกันและฉันคิดว่าฉันคิดออก คุณเพียงแค่ต้องวาง modal HTML เป็นลูกโดยตรงของแท็ก body ! คุณสามารถวางโค้ด HTML สำหรับปุ่มทริกเกอร์โมดอลได้ทุกที่ที่คุณต้องการ ฉันเชื่อว่าสิ่งนี้จะหลีกเลี่ยงปัญหาการสืบทอด CSS และตำแหน่งที่ทำให้เกิดปัญหานี้

ตัวอย่าง:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
    </div>
</body>

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

0

ในที่สุดก็คิดออก อย่าห่อปุ่มที่กำหนดเป้าหมายโมดอลในแท็กจุดยึด

ไม่ดี

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

ดี

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>

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

0

อันนี้ทำเพื่อฉัน

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}

— ไหวพริบ
แหล่งที่มา

ฉันมีปัญหาคล้ายกันกับแถบนำทางและการกระโดดของคอนเทนเนอร์เมื่อเปิดโมดอล นี่คือสิ่งที่ฉันกำลังมองหา

— Awhitey98

ดีใจด้วย!

— warkitty

0

หลังจากอ่านคำตอบหลายสิบคำในเวลาหลายชั่วโมงฉันได้คัดลอกโค้ดต้นฉบับจากไฟล์ bootstrap อีกครั้งและดีบั๊กทีละขั้นตอนเพื่อดูว่าอะไรเป็นสาเหตุที่ทำให้ฉันข้ามไปที่ด้านบนเสมอ เนื่องจาก Bootstrap 3 เวอร์ชันล่าสุดจริงกำลังแสดงโมดอลในตำแหน่งที่คุณอยู่ในขณะนี้ ฉันพบว่า-webkit-transform: translate3d(0,0,0);และheight: 100%ในแท็กร่างกาย css ของฉันทำให้เกิดพฤติกรรมนี้ บางทีนี่อาจช่วยได้บ้าง

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

0

สำหรับฉันใช้งานได้เมื่อฉันเปลี่ยนเวอร์ชันจาก3.1.1เป็น3.3.7

หากคุณไม่จำเป็นต้องใช้เวอร์ชัน 3.3.1 ให้ลองเปลี่ยนไฟล์.

หลังจากการเปลี่ยนแปลงควรตรวจสอบว่าฟังก์ชันที่เหลือทำงานได้ถูกต้องหรือไม่

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

0

body.modal-open { position: inherit; }

สิ่งนี้เป็นเสน่ห์สำหรับฉัน

— นีมิชโกล
แหล่งที่มา

0

ฉันลองใช้ตัวอย่างข้างต้นทั้งหมด - นี่เป็นสิ่งเดียวที่เหมาะกับฉัน:

.modal-open {

            padding-right: 0 !important;

        }

การถอดแผ่นรองออกจากด้านขวาของแบบจำลอง - ป้องกันการกระโดด

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

0

ความสูง: แก้ปัญหาได้ 100% แต่คุณต้องเพิ่ม "div" ที่ถูกต้อง

— Anar Ali
แหล่งที่มา

0

ฉันพบปัญหาเดียวกันและไม่มีคำตอบใดช่วยฉันได้ พบวิธีแก้ปัญหาที่ดูโง่ แต่ก็ใช้ได้ผลอย่างน้อยในกรณีของฉัน

ฉันพบว่าเพจนั้นเลื่อนไปด้านบนเพียงครั้งเดียวและหลังจากนั้นโมดอลที่เปิดถัดไปจะทำงานตามที่คาดไว้ กว่าฉันจะพบว่าการซ่อนองค์ประกอบใด ๆ ใน DOM เป็นการเริ่มต้นการเลื่อนที่แปลกประหลาดแบบเดียวกัน ดังนั้นฉันแค่สร้าง Dummy div หลังจากการโหลดหน้าเว็บมากกว่าการซ่อนและลบออกและสิ่งนี้จะช่วยแก้ปัญหาได้

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();

— บอร์ซิโลอันเดรย์
แหล่งที่มา

0

ฉันประสบปัญหาเดียวกัน ปัญหาคือฉันกำลังเพิ่ม. modal-open class ให้กับ html และ body elements เพียงเพิ่มคลาสนี้ลงในร่างกายและทุกอย่างจะทำงานตามที่คาดไว้

— ทั่วไป 666
แหล่งที่มา

-1

ลองใช้งานได้อย่างสมบูรณ์แบบ

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}

— ขั้นต่ำ
แหล่งที่มา

-1

เป็นความคิดที่ดีสำหรับการแก้ไขมันดูเหมือนจ๊อค!

เพียงพอแล้วเพิ่มหนึ่งในสองรหัส css ในสไตล์ของคุณ

.body.modal-open { overflow:visible;padding-right:0px !important;}
.body.modal-open { height:auto;padding-right:0px !important;}

https://github.com/jschr/bootstrap-modal/issues/131#issuecomment-153405449

— อาลี Sharifi
แหล่งที่มา

-3

หากคำตอบของ pstenstrm ไม่ได้ผลสำหรับคุณให้ลองรวมเข้ากับปุ่มแทนที่นี้ HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

ควรกดปุ่มนี้ไว้บนหน้าจอ

— เบน
แหล่งที่มา