Twitter बूटस्ट्रैप मोडल: स्लाइड डाउन इफ़ेक्ट कैसे हटाएं

Question

क्या ट्विटर बूटस्ट्रैप मोडल विंडो एनिमेशन को स्लाइड डाउन इफ़ेक्ट से फीका करने या स्लाइड के बिना प्रदर्शित करने का कोई तरीका है? मैं यहाँ प्रलेखन के माध्यम से पढ़ा:

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

लेकिन वे मोडल बॉडी स्लाइड प्रभाव को बदलने के लिए किसी भी विकल्प का उल्लेख नहीं करते हैं।

Answer 1

बस fadeमोडल डिव से क्लास निकालो ।

विशेष रूप से, परिवर्तन:

<div class="modal fade hide">

सेवा:

<div class="modal hide">

---

अद्यतन: bootstrap3 के लिए, hideवर्ग की जरूरत नहीं है।

Comments

हालांकि ओपी ने यह पूछा कि इसे कैसे फीका किया जाए, इसलिए इनमें से कुछ जवाब सवाल के वैकल्पिक गठन के लिए सही हैं। लगता है कि यह सिर्फ एक बुरा सवाल है क्योंकि यह वास्तव में एक में 2 प्रश्न हैं और किसी ने भी एक उत्तर में दोनों सवालों का जवाब नहीं दिया है।

— umassthrower

आपको बूटस्ट्रैप स्रोतों को संशोधित करने की आवश्यकता नहीं है। आपको केवल अपना html संशोधित करना है। यह सही जवाब है।

— एमपेकलोराडो 21

@umassthrower सही है। केवल संक्रमण न होने का उत्तर कैसे दिया जाता है। कैसे फीका है, लेकिन ऊपर से नीचे नहीं गिरा, इस सवाल का जवाब नहीं है।

— साइनेसो

मुझे नहीं पता कि यह सही उत्तर कैसे है ... यह बिना फीका के साथ मोडल पॉप बनाता है, और ओपी ने SLIDE को हटाने के लिए कहा है, लेकिन FADE नहीं ...

— Shawn टेलर

मैं फीका रखने और स्लाइड को हटाने के लिए इंतजार कर रहा हूं और यह उत्तर सहायक नहीं है। यह अजीब बूटस्ट्रैप है, जो उनके फीका वर्ग का उपयोग करके मोडल के लिए स्लाइड प्रभाव को भी संभालता है क्योंकि फीका उनके CSS में पूरी तरह से अलग है।

— लीश

Answer 2

बूटस्ट्रैप द्वारा उपयोग किए गए मोडल CSS3 का उपयोग प्रभावों की आपूर्ति करने के लिए करते हैं और उपयुक्त कंटेनर से उपयुक्त कक्षाओं को समाप्त करके उन्हें हटाया जा सकता है:

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

जैसा कि आप देख सकते हैं कि इस मॉडल की एक कक्षा है .fade, जिसका अर्थ है कि यह फीका हो जाता है .in, और इसका अर्थ है कि यह अंदर स्लाइड करेगा। इसलिए जिस वर्ग को आप हटाना चाहते हैं उससे संबंधित वर्ग को हटा दें, जो आपके मामले में सिर्फ .inकक्षा है।

संपादित करें: बस कुछ परीक्षण चलाए और ऐसा प्रतीत होता है कि ऐसा नहीं है, .inकक्षा को जावास्क्रिप्ट द्वारा जोड़ा जाता है, हालांकि आप उसे स्लाइड कर सकते हैं जैसे सीएसएस के साथ व्यवहार करें:

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

डेमो

Comments

आपको इसे पृष्ठभूमि में भी जोड़ना चाहिए: modal.fade, .modal-backdrop.fadeआदि ...

— डेविड हेलसिंग

संभवतः डेविड-उल्लेखों के कारण घटक-एनिमेशन-फ़ाइल को संपादित करना बेहतर है।

— पीटर हैनली

फीका वर्ग वैकल्पिक है, नीचे गुलाब द्वारा एक बेहतर (और पसंदीदा प्रति बीएस प्रलेखन) उत्तर दिया गया है

— umassthrower

@umassthrower यह जवाब बहुत पुराना है, लिखने के समय कि पसंद मौजूद नहीं थी।

— एंड्रेस इलिच

मुझे यकीन नहीं है कि टिप्पणी सही है क्योंकि उस जवाब से 3 महीने पहले बीएस 2.0 जारी किया गया था और मैंने गर्मियों में v2.0 का उपयोग करते समय अपने मोडल से फीका हटा दिया था। शायद उन्होंने उसके बाद तक दस्तावेज नहीं बदले। पता नहीं।

— umassthrower

Answer 3

यदि आपको स्लाइड के बजाय मोडल फीका होना पसंद है (इसे .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क्लास को मोडल कक्षाओं से हटा दें ।

Comments

शीर्ष: 50% मुसीबत खड़ी होने के लिए जब संवाद बंद लगता है। संवाद पहले की ही तरह खुलता हुआ प्रतीत हो रहा है; लेकिन बंद होने से पहले, एक विभाजन दूसरे के लिए यह केंद्र में जाता है और फिर बंद हो जाता है। क्रोम में कम से कम। क्या किसी और ने भी इस पर ध्यान दिया है?

— मोहितप

@lorem बंदर - चीयर्स, फीका चाहता था लेकिन स्लाइड नहीं। अगर किसी को scss / कम्पास संस्करण चाहिए ... .modal.fade {@include ट्रांस्फ़ॉर्मेशन (अस्पष्टता .2s रैखिक, कोई नहीं);};

— सिमोन

@mohitp "शीर्ष: 50%" के बजाय, मैं "शीर्ष: 25%" का उपयोग कर रहा हूं। मैंने भी जोड़ा .modal.fade.in {top: 25%; } लगता है मेरे लिए चाल चली गई है। निश्चित नहीं है कि यह क्यों काम करता है क्योंकि मेरे पास मेरे मोडल में "इन" क्लास नहीं है।

— डैरेन

@dkrape को inबूटस्ट्रैप.जैस द्वारा जोड़ा गया है

— डेव सैग

यह सही उत्तर है, प्रश्न के दोनों भागों का उत्तर देना।

— मैट

Answer 4

मेरा मानना ​​है कि इनमें से अधिकांश उत्तर बूटस्ट्रैप 2 के लिए हैं। मैं बूटस्ट्रैप 3 के लिए एक ही मुद्दे में भाग गया और अपने फिक्स को साझा करना चाहता था। बूटस्ट्रैप 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%

वैकल्पिक रूप से, यदि आप सिर्फ सीएसएस का उपयोग कर रहे हैं, तो निम्नलिखित में खोजें 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%।

Comments

मैं बूटस्ट्रैप की स्टाइलशीट / कम संपादन के बजाय एक कस्टम स्टाइलशीट में इन शैलियों को ओवरराइड करूंगा।

— बासेम

यह FADE w / o स्लाइड प्राप्त करने के लिए केवल सरल सीएसएस समाधान है। धन्यवाद।

— डेविडेगज़

Answer 5

मैंने इसे .modal.fadeअपनी LESS स्टाइलशीट में डिफ़ॉल्ट शैलियों को ओवरराइड करके हल किया :

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

यह एनीमेशन को फीका / फीका करता है लेकिन स्लाइड अप / स्लाइड डाउन एनीमेशन को हटा देता है।

Comments

धन्यवाद। मैंने 50% के बजाय 10% का उपयोग करके समाप्त कर दिया, और .3s से .25s तक के संक्रमण को कम कर दिया, जो मुझे थोड़ा आसान लगता है।

— isapir

एक मोडल को कई बार खोलना और बंद करना समय के साथ पृष्ठ को ऊपर ले जाता है।

— लीविस

Answer 6

मुझे सबसे अच्छा समाधान मिला है जो स्लाइड को हटाता है लेकिन फीका छोड़ देता है अपने चेसिंग की एक सीएसएस फ़ाइल में निम्नलिखित सीएसएस जोड़कर जो बूटस्ट्रैप के बाद आह्वान किया गया है।

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

Comments

यह बूटस्ट्रैप 3 के लिए फीका रखने के लिए सबसे अच्छा जवाब है, लेकिन स्लाइड को नीचे हटा दें

— निक एचएच

यह समाधान बूटस्ट्रैप 4 के लिए भी ठीक काम करता है। धन्यवाद!

— शाम

Answer 7

मुझे स्लाइड प्रभाव पसंद नहीं था। यह सब ठीक करने के लिए आपको 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%;
}

यदि आप बूटस्ट्रैप 3 के उत्तर की तलाश में हैं , तो यहां देखें

Comments

ऊपर के दो गैर-लेस उदाहरण ".modal.fade.in" घोषणा की उपेक्षा करते हैं, जो बंद होने पर थोड़ा सा मोडल कूदता है। यह एक महान काम करता है। यहाँ यह प्रचलन में है: jsfiddle.net/dkrape/4EwFq

— डैरेन

यह ज्यादातर काम करता है लेकिन मैं एक चमकदार नीली क्षैतिज रेखा (सफारी, फ़ायरफ़ॉक्स और क्रोम के सभी) में दिखाई दे रहा हूँ जब मैं अपने मॉडल से लगभग 32px ऊपर दिखाई देता हूं।

— डेव सैग

Answer 8

आप केवल "शीर्ष: -25%;" को हटाकर बूटस्ट्रैप.css को अधिलेखित कर सकते हैं;

एक बार हटाए जाने के बाद, मोडल स्लाइड एनीमेशन के बिना अंदर और बाहर फीका हो जाएगा।

Answer 9

बस फीका वर्ग को हटा दें और यदि आप चाहते हैं कि मॉडल पर प्रदर्शन करने के लिए अधिक एनिमेशन बस अपने मॉडल में animate.css कक्षाओं का उपयोग करें।

Answer 10

मैं बूटस्ट्रैप 3 और डरंडल जेएस 2 मोडल प्लगइन के साथ काम कर रहा हूं। यह सवाल Google परिणामों के शीर्ष पर था और जैसा कि ऊपर दिए गए किसी भी उत्तर में मेरे लिए काम नहीं कर रहा है, मुझे लगा कि मैं भविष्य के आगंतुकों के लिए अपना समाधान साझा करूंगा।

मैं अपने से कम में डिफ़ॉल्ट बूटस्ट्रैप के कम कोड को ओवरराइड करता हूं:

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

इस तरह मैं केवल फीका प्रभाव, और बिना किसी स्लाइडडाउन के रह गया हूं।

Answer 11

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

Comments

वह एनीमेशन को दिखाने और छिपाने से दूर करेगा। मेरे लिए एंगुलर-बूटस्ट्रैप यूआई के साथ भी ठीक काम करता है।

— एसएम अदनान

Answer 12

प्रश्न स्पष्ट था: केवल स्लाइड निकालें : यहां बताया गया है कि इसे बूटस्ट्रैप v3 में कैसे बदलना है

Modals.less में अनुवाद विवरण बाहर टिप्पणी:

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

Answer 13

देखो 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;
}

Answer 14

इसे अद्यतन करना चाहते थे। आप में से अधिकांश ने इस मुद्दे को पूरा नहीं किया है। मैं बूटस्ट्रैप 3 का उपयोग कर रहा हूं। ऊपर दिए गए फिक्स में से कोई भी काम नहीं किया है।

स्लाइड प्रभाव को हटाने के लिए, लेकिन फीका रखना। मैं बूटस्ट्रैप सीएसएस में चला गया और (निम्नलिखित चयनकर्ताओं का उल्लेख किया) - इससे समस्या हल हो गई।

 .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)*/}

Answer 15

निम्नलिखित सीएसएस मेरे लिए काम करता है - बूटस्ट्रैप 3 का उपयोग करना। आपको बूस्टर शैलियों के बाद इस सीएसएस को जोड़ने की आवश्यकता है -

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

.modal.fade {
   transition: none; 
}

Answer 16

बस 'फीका' वर्ग को मोडल वर्ग से हटा दें

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

जैसा

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