आईई 8 में बूटस्ट्रैप 3 मोडल की चौड़ाई कैसे बदल सकता हूं?

Question

मुझे आईई 8 का समर्थन करना है। मोडल स्वयं ठीक काम करता है, लेकिन मेरे आकार बदलने का प्रयास (जो फ़ायरफ़ॉक्स में ठीक काम करता है) IE8 में काम नहीं करता है।

मैं सिर्फ मॉडल-डायलॉग div (बूटस्ट्रैप संरचना में दूसरा नेस्टेड) ​​में एक वर्ग (चौड़ा मोडल) जोड़ रहा हूं और सीएसएस के माध्यम से चौड़ाई लगा रहा हूं, कुछ भी नहीं।

HTML:

 <div class="modal fade" id="modalTest" role="dialog"> 
      <div class="modal-dialog wide-modal"> 
       <div class="modal-content "> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">Testing Modal</h4> 
       </div> 
       <div class="modal-body"> 
        <img src="content/Example-Infographic.jpg" width="100%" /> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div> 

सीएसएस:

.wide-modal { 
    width: 60%; 
} 

मैं ऊपर और कोई (सकारात्मक) प्रभाव के लिए नीचे div करने के लिए वर्ग को जोड़ने की कोशिश की। यह एक आकर्षण की तरह काम करता है जहां यह फ़ायरफ़ॉक्स में है, आईई 8 में बिल्कुल कोई प्रभाव नहीं है। मैंने एक पीएक्स चौड़ाई के साथ भी कोशिश की, कोई फर्क नहीं पड़ता। मेरे पास respond.js लाइब्रेरी है, इसलिए सामान्य IE8 में इसके अलावा अन्य व्यवहार कर रहा है।

Answer 1

यह निश्चित रूप से आपकी सभी मोडल विंडो के लिए चौड़ाई बदल देगा, लेकिन यह आपको यह कैसे काम करता है इस बारे में एक बेहतर विचार दे सकता है। मैंने अभी अपनी मोडल विंडो को इस तरह बदल दिया है।

.modal-body { 
     position: relative; 
     padding: 20px; 
     min-width: 800px; /* SET THE WIDTH OF THE MODAL */ 
    } 

    .modal-content { 
     position: relative; 
     background-color: #fff; 
     border: 1px solid #999; 
     border: 1px solid rgba(0,0,0,0.2); 
     border-radius: 6px; 
     outline: 0; 
     -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5); 
     box-shadow: 0 3px 9px rgba(0,0,0,0.5); 
     background-clip: padding-box; 
     width: 900px; /* SET THE WIDTH OF THE MODAL */ 
     margin: 50px 0 0 -150px; /* CHANGE MARGINS TO ACCOMMODATE THE NEW WIDTH */ 
    } 



<!-- Button trigger modal --> 
    <a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> 

    <!-- 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" aria-hidden="true">&times;</button> 
      <h4 class="modal-title">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><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
    </div><!-- /.modal --> 

Answer 2

मुझे लगता है कि आपको चौड़ाई को पिक्सल में सेट करने और मार्जिन-बाएं समायोजित करने की आवश्यकता है। उदाहरण के लिए,

.modal-dialog { 
    width:700px; 
    margin-left:-320px; 
} 

मार्जिन बाएँ मोडल की आधी चौड़ाई, शून्य से स्क्रॉलबार के लिए 30px होना चाहिए। http://bootply.com/85213

Answer 3

बूटस्ट्रैप 3 में आप .modal वर्ग के लिए नहीं है, लेकिन .modal-dialog

#modalTest .modal-dialog 
{ 
    width: 500px; /* your width */ 
} 

Answer 4

#modalTest.modal-dialog{ 
    width: <insert size> !important; 
} 
the !important is important :v 

Answer 5

को मैं के साथ-साथ, सीएसएस और jQuery का एक संयोजन का इस्तेमाल किया चौड़ाई आवंटित की जरूरत है:

यहाँ Bootply पर एक उदाहरण है बूटस्ट्रैप 3 का उपयोग करके तरल चौड़ाई और ऊंचाई बनाने के लिए इस पृष्ठ पर संकेत। मैंने Win7 पर IE8 पर इसका परीक्षण भी किया, और यह बहुत अच्छा काम करता है।

सबसे पहले, कुछ सीएसएस चौड़ाई और सामग्री क्षेत्र

.modal.modal-wide .modal-dialog { 
    width: 90%; 
} 
.modal-wide .modal-body { 
    overflow-y: auto; 
} 

के लिए वैकल्पिक स्क्रॉलबार को संभालने के लिए और फिर कुछ jQuery अगर

$(".modal-wide").on("show.bs.modal", function() { 
    var height = $(window).height() - 200; 
    $(this).find(".modal-body").css("max-height", height); 
}); 

पूर्ण लिखने की जरूरत सामग्री क्षेत्र की ऊंचाई को समायोजित करने के लिए http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

Answer 6

मुझे पता है कि यह देर हो चुकी है लेकिन bs3 docs में आप पाए गएआपके मॉडलों के लिएकक्षा

<!-- Large modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"> 
    Large modal 
</button> 

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
    ... 
    </div> 
    </div> 
</div> 

<!-- Small modal --> 
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"> 
    Small modal 
</button> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> 
<div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
    ... 
    </div> 
</div> 
</div>