Twitter Bootstrap modal: วิธีการลบ Slide down effect

167

มีวิธีในการเปลี่ยนภาพเคลื่อนไหวหน้าต่าง Twitter Bootstrap Modal จากเอฟเฟกต์แบบเลื่อนลงเป็น fadeIn หรือเพียงแค่แสดงโดยไม่ต้องสไลด์หรือไม่? ฉันอ่านเอกสารที่นี่:

http://getbootstrap.com/javascript/#modals

แต่พวกเขาไม่ได้กล่าวถึงตัวเลือกใด ๆ สำหรับการเปลี่ยนเอฟเฟกต์บอดี้สไลด์แบบโมดัล

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

359

เพียงแค่นำfadeคลาสออกจาก dival mod

โดยเฉพาะการเปลี่ยนแปลง:

<div class="modal fade hide">

ถึง:

<div class="modal hide">

UPDATE:สำหรับ bootstrap3 hideไม่จำเป็นต้องมีคลาส

— โรสเพอร์โรน
แหล่งที่มา

9

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

— umassthrower

1

คุณไม่ต้องแก้ไขแหล่งบู๊ตสแตรป คุณต้องแก้ไข html ของคุณเท่านั้น นี่คือคำตอบที่ถูกต้อง

— mpccolorado

31

@umassthrower ถูกต้อง วิธีตอบว่าไม่มีการเปลี่ยนแปลงเท่านั้น คำถามของวิธีการจางหาย แต่ไม่เลื่อนลงจากด้านบนไม่ครอบคลุมโดยคำตอบนี้

— Synesso

26

ฉันไม่เข้าใจว่านี่เป็นคำตอบที่ถูกต้องหรือไม่ ... มันทำให้ป๊อปเป็นโมฆะโดยไม่จางหายและ OP ขอให้ลบสไลด์ แต่ไม่ใช่เฟดเด

— อร์

2

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

— Leeish

36

modals ที่ใช้โดย bootstrap ใช้ CSS3 เพื่อให้เอฟเฟกต์และสามารถลบออกได้โดยกำจัดคลาสที่เหมาะสมจาก modals container div:

<div class="modal hide fade in" id="myModal">
   ....
</div>

ดังที่คุณเห็นโมดอลนี้มีคลาส.fadeหมายความว่ามันจะจางหายไปและ.inหมายความว่ามันจะเลื่อนเข้าดังนั้นให้ลบคลาสที่เกี่ยวข้องกับเอฟเฟกต์ที่คุณต้องการลบออกซึ่งในกรณีของคุณเป็นเพียง.inคลาส

แก้ไข: เพิ่งทำการทดสอบบางอย่างและปรากฏว่าไม่เป็นเช่นนั้น.inคลาสจะถูกเพิ่มโดย javascript แม้ว่าคุณจะสามารถปรับเปลี่ยนพฤติกรรมของสไลด์เดอร์ได้ด้วย css เช่น:

.modal.fade {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

การสาธิต

— Andres Ilich
แหล่งที่มา

2

คุณควรเพิ่มเข้าไปในฉากหลัง: modal.fade, .modal-backdrop.fadeฯลฯ ...

— David Hellsing

น่าจะดีกว่าที่จะแก้ไขไฟล์ component-animations.less เนื่องจากเหตุผลที่ David กล่าวถึง

— Peter Hanley

ชั้นจางเป็นตัวเลือกมีคำตอบที่ดีกว่า (และเป็นที่ต้องการต่อเอกสาร BS) โดยกุหลาบด้านล่าง

— umassthrower

@umassthrower คำตอบนี้ค่อนข้างเก่าในขณะที่เขียนทางเลือกนั้นไม่มีอยู่จริง

— Andres Ilich

ฉันไม่แน่ใจว่าความคิดเห็นนั้นถูกต้องเนื่องจาก BS 2.0 วางจำหน่าย 3 เดือนก่อนคำตอบนั้นและฉันลบเลือนหายไปจาก modals ของฉันเมื่อใช้ v2.0 ฤดูร้อนที่ผ่านมา บางทีพวกเขาอาจไม่เปลี่ยนเอกสารจนกระทั่งหลังจากนั้น dunno

— umassthrower

30

หากคุณต้องการให้คำกริยาจางหายไปแทนที่จะเลื่อนลง (ทำไมถึงเรียกว่า.fadeต่อไป) คุณสามารถเขียนทับคลาสในไฟล์ CSS ของคุณหรือโดยตรงbootstrap.cssด้วย:

.modal.fade{
    -webkit-transition: opacity .2s linear, none;
    -moz-transition: opacity .2s linear, none;
    -ms-transition: opacity .2s linear, none;
    -o-transition: opacity .2s linear, none;
    transition: opacity .2s linear, none;
    top: 50%;
}

หากคุณไม่ต้องการให้เอฟเฟกต์ใด ๆ ให้ลบfadeคลาสออกจากคลาสโมดัล

— ลิง Lorem
แหล่งที่มา

1

ด้านบน: 50%ดูเหมือนว่าจะก่อให้เกิดปัญหาเมื่อปิดโต้ตอบ ดูเหมือนว่ากล่องโต้ตอบจะเปิดขึ้นในสถานที่เดียวกันเช่นเดิม แต่ก่อนที่จะปิดสำหรับเสี้ยววินาทีที่จะย้ายไปที่ศูนย์แล้วปิด Atleast ใน Chrome มีใครสังเกตเห็นสิ่งนี้ด้วยเช่นกัน?

— mohitp

1

@lorem monkey - ไชโยอยากจางหาย แต่ไม่ใช่สไลด์ หากใครต้องการรุ่น scss / compass ... . modal.fade {@ รวมการเปลี่ยนแปลง (ความทึบแสงเชิงเส้น. 2s, ไม่มีเลย);}

— Simon

1

@mohitp แทนที่จะเป็น "top: 50%" ฉันใช้ "top: 25%" ฉันยังเพิ่ม. modal.fade.in {top: 25%; } ดูเหมือนว่าฉันได้ทำเคล็ดลับสำหรับฉันแล้ว ไม่แน่ใจว่าทำไมสิ่งนี้ถึงใช้ได้เนื่องจากฉันไม่มีคลาส "ใน" ในคำกริยาของฉัน

— Darren

2

@dkrape inชั้นเรียนถูกเพิ่มโดย Bootstrap.js

— Dave Sag

นี่คือคำตอบที่ถูกต้องตอบคำถามทั้งสองส่วน

— แมตต์

26

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

คุณสามารถเปลี่ยนไฟล์ modals.less หรือ theme.css ขึ้นอยู่กับเวิร์กโฟลว์ของคุณ หากคุณไม่ได้ใช้เวลาอย่างมีคุณภาพ แต่น้อยฉันแนะนำเป็นอย่างยิ่ง

ให้น้อยลงค้นหารหัสต่อไปนี้ใน MODALS.less

&.fade .modal-dialog {
  .translate(0, -25%);
  .transition-transform(~"0.3s ease-out");
}
&.in .modal-dialog { .translate(0, 0)}

แล้วเปลี่ยน-25%ไป0%

หรือถ้าคุณใช้เพียงแค่ CSS ให้ค้นหาสิ่งต่อไปนี้ในtheme.css:

.modal.fade .modal-dialog {
  -webkit-transform: translate(0, -25%);
  -ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}

แล้วเปลี่ยนไป-25%0%

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

2

ฉันจะแทนที่สไตล์เหล่านี้ในสไตล์ชีทที่กำหนดเองแทนการแก้ไขสไตล์ชีท Bootstrap / Less

— Bassem

นี่เป็นโซลูชัน CSS อย่างง่ายเท่านั้นที่จะได้รับสไลด์ FADE ที่ไม่มี ขอบคุณ.

— davideghz

18

ฉันแก้ไขสิ่งนี้ได้ด้วยการแทนที่.modal.fadeสไตล์เริ่มต้นในสไตล์ชีต LESS ของฉันเอง:

.modal {
  &.fade {
    .transition(e('opacity .3s linear'));
    top: 50%;
  }
  &.fade.in { top: 50%; }
}

สิ่งนี้จะช่วยให้ภาพเคลื่อนไหวเลือนหาย / จางหายไป แต่จะลบภาพเคลื่อนไหวสไลด์ขึ้น / เลื่อนลง

— อเล็กซ์เบน
แหล่งที่มา

ขอบคุณ. ฉันลงเอยด้วยการใช้ 10% แทน 50% และลดการเปลี่ยนจาก. 3s เป็น. 25s ซึ่งดูเหมือนจะราบรื่นกว่าสำหรับฉันเล็กน้อย

— isapir

การเปิดและปิด modal หลายครั้งจะเลื่อนหน้าขึ้นเมื่อเวลาผ่านไป

— Leeish

12

ฉันได้พบทางออกที่ดีที่สุดที่ลบสไลด์ แต่ใบจางคือการเพิ่ม css ต่อไปนี้ในไฟล์ css ของการเลือกของคุณซึ่งถูกเรียกหลังจาก bootstrap.css

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;

    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

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

1

นี่คือคำตอบที่ดีที่สุดสำหรับ Bootstrap 3 เพื่อให้จางหาย แต่ลบสไลด์ลง

— NickH

2

วิธีนี้ใช้ได้ผลดีสำหรับ Bootstrap 4 เช่นกัน ขอบคุณ!

— aprovent

11

ฉันไม่ชอบเอฟเฟกต์ภาพนิ่งเช่นกัน ในการแก้ไขสิ่งที่คุณต้องทำก็คือทำให้topแอตทริบิวต์นั้นเหมือนกันสำหรับ. modal.fade และ modal.fade.in คุณสามารถจะปิดtop 0.3s ease-outในการเปลี่ยนเกินไป แต่ก็ไม่เจ็บทิ้งไว้ใน. ผมชอบวิธีนี้เพราะจางเข้า / ออกงานก็แค่ฆ่าสไลด์

.modal.fade {
  top: 20%;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

.modal.fade.in {
  top: 20%;
}

หากคุณกำลังมองหา bootstrap 3 คำตอบให้ดูที่นี่

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

1

ตัวอย่างที่ไม่ใช่ LESS สองอันดับแรกด้านบนละเลยการประกาศ ".modal.fade.in" ซึ่งทำให้คำกริยากระโดดไปรอบ ๆ เล็กน้อยเมื่อปิด อันนี้ใช้งานได้ดี ที่นี่มีการใช้งานจริง: jsfiddle.net/dkrape/4EwFq

— Darren

ส่วนใหญ่ใช้งานได้ แต่ฉันเห็นเส้นแนวนอนสีน้ำเงินสดใสปรากฏขึ้น (ใน Safari, Firefox และ Chrome ทั้งหมด) ประมาณ 32px เหนือ Modal ของฉันเมื่อมันปรากฏขึ้น

— Dave Sag

2

คุณสามารถเขียนทับ bootstrap.css โดยเพียงแค่ลบ "top: -25%;"

เมื่อลบออกแล้วโมดัลจะจางหายไปโดยไม่ต้องใช้ภาพเคลื่อนไหวสไลด์

— Amr Morsy
แหล่งที่มา

2

เพียงแค่ลบคลาส fade และหากคุณต้องการให้แอนิเมชั่นแสดงมากขึ้นบน Modal ให้ใช้คลาส animate.css ใน Modal ของคุณ

— Kapil Kumar
แหล่งที่มา

1

ฉันทำงานกับ bootstrap 3 และปลั๊กอิน modal Durandal JS 2 คำถามนี้อยู่เหนือผลการค้นหาของ Google และเนื่องจากไม่มีคำตอบใด ๆ ข้างต้นที่ใช้งานได้สำหรับฉันฉันคิดว่าฉันจะแบ่งปันวิธีแก้ปัญหาให้กับผู้เยี่ยมชมในอนาคต

ฉันจะแทนที่โค้ด Less ของ Bootstrap ซึ่งเป็นค่าเริ่มต้นด้วยค่านี้ใน less ของตัวเอง:

.modal {
  &.fade .modal-dialog {
    .translate(0, 0);
    .transition-transform(~"none");
  }
  &.in .modal-dialog { .translate(0, 0)}
}

ทางฉันเหลือเพียงเอฟเฟกต์จางและไม่มีสไลด์เดอร์

— เดวิด
แหล่งที่มา

1

.modal.fade, .modal.fade .modal-dialog {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

— SM Adnan
แหล่งที่มา

ที่จะลบภาพเคลื่อนไหวออกจากการแสดงและซ่อน ทำงานได้ดีสำหรับฉันด้วย Angular-Bootstrap ui ด้วย

— SM Adnan

1

คำถามชัดเจน: ลบเท่านั้นสไลด์: นี่คือวิธีการเปลี่ยนใน Bootstrap v3

ใน modals.less แสดงความคิดเห็นคำสั่งแปล:

&.fade .modal-dialog {
  //   .translate(0, -25%);

— Derry Birkett
แหล่งที่มา

1

ดูที่http://quickrails.com/twitter-bootstrap-modal-how-to-remove-slide-down-effect-but-leaves-the-fade/

.modal.fade .modal-dialog 
{
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

— Konstantin XFlash Stratigenas
แหล่งที่มา

0

ต้องการอัปเดตนี้ พวกคุณส่วนใหญ่ยังไม่จบปัญหานี้ ฉันใช้ Bootstrap 3. การแก้ไขด้านบนไม่ทำงาน

เพื่อลบเอฟเฟกต์ภาพนิ่ง แต่ให้จางหายไปฉันเข้าสู่ bootstrap css และ (จดบันทึกตัวเลือกต่อไปนี้) - วิธีนี้แก้ไขปัญหาได้

 .modal.fade .modal-dialog{/*-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);transform:translate(0,-25%);-webkit-transition:-webkit-transform .3s ease-out;-moz-transition:-moz-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out*/}

 .modal.in .modal-dialog{/*-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0)*/}

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

0

CSS ต่อไปนี้ใช้งานได้สำหรับฉัน - การใช้ Bootstrap 3 คุณต้องเพิ่ม CSS นี้หลังจากสไตล์ของ Boostrap -

.modal.fade .modal-dialog{
    -webkit-transition-property: transform; 
    -webkit-transition-duration:0 ; 
    transition-property: transform; 
    transition-duration:0 ; 
}

.modal.fade {
   transition: none; 
}

— อิกนาชิโอวาเซเก
แหล่งที่มา

0

เพียงแค่ลบ 'จาง' คลาสออกจากคลาสโมดัล

class="modal fade bs-example-modal-lg"

เช่น

class="modal bs-example-modal-lg"

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