Twitter बूटस्ट्रैप के लिए मोडल आकार बढ़ाएँ

Question

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

जिस फॉर्म को मैं प्रस्तुत करता हूं, उसे शायद एक और 50px की जरूरत है - बस बटन गायब है।

इसलिए मैंने अपने आवेदन में .modal शैलियों को ओवरराइड करने की कोशिश की है। फाइल (फाइल 3.2 का उपयोग करके) लेकिन अधिकतम ऊंचाई और ओवरफ्लो डिक्लेरेशन को अधिलेखित किया जा रहा है।

कोई विचार?

Comments

मेरे पास एक ही सवाल है ... क्रोम का कहना है कि ऊंचाई की संपत्ति को स्वीकार किया जाता है (मध्य रेखा को ओवरराइट की गई संपत्तियों के रूप में नहीं मिलता है) लेकिन गणना की गई ऊंचाई समान रहती है

— एफएसिनोज़ैकास्ट

मुझे लगता है कि इससे मदद मिल सकती है।

— सांच्रो

Answer 1

मुझे वही समस्या हो रही थी, आप कोशिश कर सकते हैं:

.modal-body {
    max-height: 800px;
}

यदि आप नोटिस करते हैं कि स्क्रॉल-बार केवल मोडल संवाद के मुख्य भाग पर दिखाई देते हैं, तो इसका मतलब है कि केवल शरीर की अधिकतम-ऊँचाई को समायोजित करने की आवश्यकता है।

Comments

मोडल-बॉडी के लिए अधिकतम ऊंचाई सेट करना पर्याप्त नहीं है, क्योंकि मोडल के नीचे स्क्रीन से बाहर धकेल दिया जा सकता है। मुझे इसके साथ सफलता मिली: .मोडल {टॉप: 5%; नीचे: 5%; }। शरीर-शरीर {अधिकतम-ऊँचाई: 100%; ऊंचाई: 85%; }

— Csongor फाग्याल

मुझे ऊंचाई का उपयोग करना पड़ा: अधिकतम ऊंचाई के बजाय 800px: काम करने के लिए 800px।

— साइबरनेटिक

Answer 2

बूटस्ट्रैप 3 में:

.modal-dialog{
  width:whatever
}

Comments

जिस तिथि में प्रश्न किया गया था, मुझे नहीं लगता कि टीबी 3 एक मुद्दा था। लेकिन, किसी भी मामले में, टिप के लिए धन्यवाद, यह वास्तव में उपयोगी है!

— डेनिस ब्रागा

बस स्पष्ट करने के लिए, यदि आप केवल एक विशिष्ट मोडल का आकार निर्धारित करना चाहते हैं, तो कोई भी ऐसा कर सकता है: #modal_ID .modal-dialog { width: 800px }

— ग्रेग ए

Answer 3

आपको यह सुनिश्चित करने की आवश्यकता है कि यह #myModal पर है। आधुनिक-शरीर तत्व न केवल #myModal पर (कुछ लोगों ने यह गलती की है) और आप भी मामूली अंतर को बदलकर ऊंचाई परिवर्तन के लिए सवार होना चाह सकते हैं।

Comments

लिंक की मृत्यु हो गई :(

— Dan

Answer 4

नए CSS3 'vh' (या चौड़ाई के लिए 'vw') माप का उपयोग करना (जो दृश्य पोर्ट के एक अंश के रूप में ऊंचाई सेट करता है:

.modal-body {
    max-height: 80vh; //Sets the height to 80/100ths of the viewport.
}

इस तरह, यदि आप बूटस्ट्रैप की तरह एक उत्तरदायी ढांचे का उपयोग कर रहे हैं, तो आप उस डिज़ाइन को अपने मोडल में भी रख सकते हैं।

Answer 5

चौड़ाई और ऊंचाई के लिए दो विधियों का मिश्रण है और आपके पास एक अच्छा हैक है:

सीएसएस:

#myModal .modal-body {max-height: 800px;}

JQuery:

$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})

यह एक वह है जिसका मैं उपयोग करता हूं। यह चौड़ाई और ऊंचाई दोनों के लिए मार्जिन और स्क्रॉलबर्स मुद्दों को ठीक करता है, लेकिन यह अपनी सामग्री को फिट करने के लिए मोडल का आकार नहीं बदलेगा।

आशा है कि मैं मदद की थी!

Comments

मैंने काम करने के लिए JQuery प्राप्त करने की कोशिश की, लेकिन मेरे पास कोई भाग्य नहीं था। क्या आप मदद कर सकते हैं? मुझे JQuery का उपयोग कहां करना चाहिए?

— सैमुअल टेलर

मोडल पर अधिकतम-ऊँचाई नीचे के आधे हिस्से को फैलाएगी और स्क्रॉल करने योग्य नहीं होगी। (जैसा कि @mcabral ने सुझाव दिया है)

— nagytech

Answer 6

CSS क्लास का उपयोग करना (आप स्टाइल को ओवरराइड भी कर सकते हैं - सुझाव नहीं दिया गया है):

(Html)

<div class="modal-body custom-height-modal" >

(सीएसएस)

.custom-height-modal {
  height: 400px;
}

Answer 7

मुझे जवाब मिला ... बात यह है कि आपके पास अधिकतम ऊंचाई की विशेषता को अधिलेखित कर दिया है और बूटस्ट्रैप मोडल को 500px ऊंचाई सीमा से परे आकार दिया जा सकता है

Comments

मैंने .modal वर्ग पर अधिकतम ऊंचाई की कोशिश की, लेकिन यह भी काम नहीं किया। क्या आप शायद आपके द्वारा उपयोग किए गए सीएसएस को साझा कर सकते हैं?

— एपि

.modal {ऊँचाई: 600px; अधिकतम ऊंचाई: 700px; }। बस इतना ही

— fespinozacast

इस दृष्टिकोण के साथ समस्या यह है कि बैक ओवरले का विस्तार नहीं किया गया है, इस प्रकार पॉपअप का एक हिस्सा

— अनुपलब्ध

Answer 8

बूटस्ट्रैप बड़े मॉडल

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

बूटस्ट्रैप छोटा मॉडल

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

Answer 9

बस ".modal-body" ऊँचाई सेट करें: 100% यह आपकी सामग्री के अनुसार ऊँचाई को समायोजित करेगा और आपकी स्क्रीन के अनुसार "अधिकतम ऊँचाई" लगाएगा ...

Answer 10

क्या आपने आकार पैरामीटर आज़माया है:

return $modal.open({
  backdrop: 'static',     
  size: 'sm',                   
  templateUrl: "app/views/dialogs/error.html",
  controller: "errorDialogCtrl",

वैकल्पिक आकार

मोडल के पास दो वैकल्पिक आकार होते हैं, जो एक .modal-dialog पर रखे जाने के लिए संशोधक कक्षाओं के माध्यम से उपलब्ध होते हैं।

1. डिफ़ॉल्ट: 600px
2. sm: छोटा, 300px की चौड़ाई
3. lg: बड़ी, 900px की चौड़ाई

यदि आप कुछ अलग चाहते हैं, तो bootstarp.css को अपडेट करें

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
  .modal-xy {  // custom
    width: xxxpx;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

Answer 11

Boostrap> 4 के लिए इसने मेरे लिए काम किया:

.modal-content{
  width: 1200px;
}

अधिक उन्नत संस्करण:

body .modal-content{
  width: 160%!important;
  margin-left: -30%!important;
}

यहाँ एक कोडपेन है:

https://codepen.io/AlfredoMoralesPinzon/pen/xyVOaK

Answer 12

यह मानते हुए कि आपके मोडल में modal1निम्नलिखित सीएसएस की आईडी है, मोडल की ऊंचाई को बढ़ाएगा और किसी भी अतिप्रवाह को प्रदर्शित करेगा।

#modal1 .modal-body{
    max-height: 700px;
    overflow: visible;
}

Answer 13

ऊपर की कुछ कोशिश की चौड़ाई और ऊंचाई के विशिष्ट आकार (एक मॉडल में एक छवि प्रदर्शित करने के लिए) सेट करने की आवश्यकता है और जैसा कि ऊपर किसी ने मेरी मदद नहीं की मैंने शैलियों को ओवरराइड करने का फैसला किया है और निम्नलिखित को मुख्य <div> में जोड़ा है class = "modal hide fade in" इसमें: यानी मोडल की पृष्ठभूमि के लिए शैली टैग में एक चौड़ाई जोड़ी गई।

style="display: none; width:645px;"

और फिर मोडल-बॉडी में निम्नलिखित 'स्टाइल' टैग जोड़े:

<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">

अब एक आकर्षण की तरह काम करता है, मैं एक छवि प्रदर्शित कर रहा हूं और अब यह बिल्कुल सही बैठता है।

Comments

किसी भी कारण के रूप में यह नीचे गिरा दिया गया था? जब आपको लगता है कि कोई त्रुटि हुई है या कोई असंबद्ध / असंबद्ध टिप्पणी की गई है तो कुछ प्रतिक्रिया उपयोगी होगी।

— फ्लैशटेरेव

Answer 14

यह मेरे लिए काम किया:

#modal1 .modal 
{ 
     overflow-y: hidden; 
}

#modal1 .modal-dialog 
{ 
     height: 100%; 
     overflow-y: hidden; 
}

ध्यान दें कि मेरे मामले में, मेरे पास नेस्टेड मोडल हैं, प्रत्येक में नियंत्रण होता है जिसके लिए अलग-अलग ऊंचाइयों की आवश्यकता होती है जब मुझे नेस्टेड मोडल के अंदर नियंत्रण के प्रदर्शन को टॉगल करना होता है , इसलिए मैं अधिकतम-ऊंचाई , बजाय ऊंचाई को लागू नहीं कर सका : मेरे लिए 100% अच्छी तरह से काम करता है।

Answer 15

वैकल्पिक बूटस्ट्रैप कक्षाएं न भूलें modal-lgऔर modal-smयदि आप उत्तरदायी ढांचे के भीतर रखना चाहते हैं। और अपने फॉर्म के नीचे एक उपसर्ग जोड़ें, जो आपकी संरचना पर निर्भर होने में मदद कर सकता है।

Answer 16

मैं हाल ही में यह कोशिश कर रहा था और यह सही हो गया: आशा है कि यह मददगार होगा

 .modal .modal-body{
        height: 400px;
    }

यह आपके मॉडल की ऊंचाई को समायोजित करेगा।

Answer 17

बूटस्ट्रैप मोडल के आकार को बढ़ाने के लिए यहां एक और सरल विधि दी गई है:

$(".modal-dialog").css("width", "80%");

मोडल की चौड़ाई स्क्रीन के प्रतिशत के संदर्भ में निर्दिष्ट की जा सकती है। उपरोक्त उदाहरण में मैंने इसे अपनी स्क्रीन चौड़ाई के 80% पर सेट किया है।

नीचे उसी का एक कार्य उदाहरण दिया गया है:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>