कैसे सामग्री के आधार पर गतिशील रूप से ट्विटर बूटस्ट्रैप मॉडल का आकार बदलें

Question

मेरे पास डेटाबेस सामग्री है जिसमें विभिन्न प्रकार के डेटा हैं, जैसे कि Youtube वीडियो, Vimeo वीडियो, पाठ, Imgur चित्र, आदि। इन सभी में अलग-अलग ऊँचाई और चौड़ाई है। इंटरनेट पर खोज करते समय मैंने जो कुछ भी पाया है वह आकार को केवल एक पैरामीटर में बदल रहा है। यह पॉपअप में सामग्री के समान होना चाहिए।

यह मेरा HTML कोड है। मैं सामग्री को कॉल करने के लिए भी अजाक्स का उपयोग करता हूं।

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="ModalLabel"></h3>
    </div>
    <div class="modal-body">

    </div>
</div> 

Answer 1

चूँकि आपकी सामग्री गतिशील होनी चाहिए, आप मोडल की showघटना पर गतिशील रूप से मॉडल के सीएसएस गुणों को सेट कर सकते हैं जो अपने डिफ़ॉल्ट चश्मे को ओवरराइड करने वाले मोडल को फिर से आकार देगा। कारण बूटस्ट्रैप नीचे दिए गए सीएसएस नियम के साथ मोडल बॉडी पर अधिकतम ऊंचाई लागू करता है:

.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    padding: 15px;
}

तो आप इनलाइन शैलियों को गतिशील रूप से jquery cssविधि का उपयोग करके जोड़ सकते हैं :

बूटस्ट्रैप उपयोग के नए संस्करणों के लिए show.bs.modal

$('#modal').on('show.bs.modal', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

बूटस्ट्रैप के पुराने संस्करणों के लिए उपयोग करें show

$('#modal').on('show', function () {
       $(this).find('.modal-body').css({
              width:'auto', //probably not needed
              height:'auto', //probably not needed 
              'max-height':'100%'
       });
});

या ओवरराइड करने के लिए css नियम का उपयोग करें:

.autoModal.modal .modal-body{
    max-height: 100%;
}

और इस वर्ग autoModalको अपने लक्ष्य मोडल में जोड़ें।

फ़िड में सामग्री को गतिशील रूप से बदलें, आप देखेंगे कि मोडल उसी के अनुसार आकार बदल रहा है। Demo

बूटस्ट्रैप का नया संस्करण उपलब्ध देखें event names।

• show.bs.modal यह घटना तुरंत दिखाई देती है जब शो इंस्टेंस विधि को कॉल किया जाता है। यदि एक क्लिक के कारण, क्लिक किया गया तत्व घटना के संबंधित संपत्ति के रूप में उपलब्ध है।
• show.bs.modal यह घटना तब निकाल दी जाती है जब उपयोगकर्ता को मॉडल दिखाई दे रहा है (सीएसएस संक्रमण के पूरा होने की प्रतीक्षा करेगा)। यदि एक क्लिक के कारण, क्लिक किया गया तत्व घटना के संबंधित संपत्ति के रूप में उपलब्ध है।
• Hide.bs.modal इस घटना को तुरंत निकाल दिया जाता है जब छिपाने की विधि विधि को बुलाया गया है।
• hidden.bs.modal यह घटना तब निकाल दी जाती है जब मॉडल उपयोगकर्ता से छिपाया जा रहा है (सीएसएस संक्रमण के पूरा होने का इंतजार करेगा)।
• load.bs.modal यह घटना तब निकाल दी जाती है जब मोडल ने रिमोट विकल्प का उपयोग करके सामग्री लोड की है।

बूटस्ट्रैप का पुराना संस्करण modal events समर्थित है।

• शो - यह घटना शो इंस्टेंस विधि कहे जाने पर तुरंत फायर करती है।
• दिखाया - यह घटना तब निकाल दी जाती है जब उपयोगकर्ता को मॉडल दिखाई दे रहा है (पूरा होने के लिए सीएसएस बदलाव की प्रतीक्षा करेगा)।
• छिपाना - इस घटना को तुरंत निकाल दिया जाता है जब छिपाने की विधि विधि को बुलाया गया है।
• छिपी हुई - यह घटना तब निकाल दी जाती है जब उपयोगकर्ता द्वारा मॉडल को छिपाया जा रहा है (पूरा होने के लिए सीएसएस बदलाव की प्रतीक्षा करेगा)।

Comments

मुझे #modal को समान रूप में बदलना पड़ा। Moda-body अब यह पूरी तरह से काम करता है। आपका बहुत बहुत धन्यवाद!

— एर्देम ऐस

@PSL, जवाब के लिए और मुझे शुरू करने के लिए लिए +1 kbd अतः में।

— रोलैंडो इसिडोरो

शो इवेंट की तरह काम नहीं करता है। यह काम किया: $('#modal').on('show.bs.modal', function () { getbootstrap.com/javascript/#modals-events

— joym8

विस्तार और पुराने और नए को समायोजित करने के लिए +1। अब अगर केवल यह स्क्रीन की पूरी चौड़ाई भर नहीं था और वास्तव में आकार में गतिशील था।

— चमकदार

@ पीएसएल रनटाइम पर कैसे मोडल की चौड़ाई में हेरफेर कर सकता है? मेरा मतलब है कि इसे जावास्क्रिप्ट के साथ छोटा या बड़ा करें?

— श्रीदेवी एम कैसानोवा 19

Answer 2

यह मेरे लिए काम करता है, उपरोक्त में से कोई भी काम नहीं किया।

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 300px;   
}

Comments

@GreenAsJade इस लिंक को समझने में आपकी सहायता कर सकता है: colintoh.com/blog/display-table-ant-heri- iandevlin.com/blog/2013/06/css/css-stacking-with-display-table

— अमित शाह

@ maheshreddy आपका स्वागत है, अगर यह मदद करता है तो +1 मत भूलना। इसलिए अन्य लोग इस उत्तर पर अधिक भरोसा कर सकते हैं और कोशिश कर सकते हैं।

— अमित शाह

यह गतिशील रूप से ऊंचाई निर्धारित करता है, लेकिन इस बार मोडल संवाद स्क्रीन के बाईं ओर खोला जाता है। इसे कैसे जोड़ेंगे?

— जैक

लेकिन यह उत्तरदायी, मोबाइल दृश्य में काम नहीं कर रहा है। यह लैपटॉप स्क्रीन में बहुत काम कर रहा है।

— चेतन

यह काम किया, लेकिन यह पृष्ठ में लंबवत रूप से केंद्रित नहीं होने पर मोडल का अनपेक्षित प्रभाव था। एक बड़ी बात नहीं है, लेकिन मुझे लगा कि मैं कुछ का उल्लेख करूंगा।

— जॉन एलार्ड

Answer 3

मुझे मेरे लिए पीएसएल का जवाब काम नहीं कर पाया, इसलिए मैंने पाया कि मुझे ऐसा करना है, जिसमें मोडल कंटेंट रखने वाली डिव सेट हो style="display: table;"। मोडल कंटेंट खुद कहता है कि वह कितना बड़ा बनना चाहता है और मोडल उसे समायोजित करता है।

Comments

मुझे पीएसएल का जवाब काम नहीं आया। (शायद इसलिए कि मैं बूटस्ट्रैप के कोणीय संस्करण का उपयोग कर रहा था) यह मेरे लिए काम करता है। बस ध्यान दें कि इस शैली को .modal-dialog class +1

— user227353

मैंने आपके समाधान को "मॉडल-सामग्री" वर्ग के रूप में लागू किया, मेरे लिए काम किया।

— मेहंदी

Answer 4

ऐसा करने के कई तरीके हैं यदि आप सीएसएस लिखना चाहते हैं तो निम्नलिखित जोड़ें

.modal-dialog{
  display: table
}

यदि आप इनलाइन जोड़ना चाहते हैं तो

<div class="modal-dialog" style="display:table;">
//enter code here
</div>

display:table;मॉडल-सामग्री वर्ग में न जोड़ें । इसने आपका काम कर दिया लेकिन बड़े आकार के स्क्रीनशॉट के लिए अपने मोडल को डिस्पोज़ करें। पहली छवि यह है कि यदि आप शैली को मॉडल-संवाद में जोड़ते हैं यदि आप शैली को मॉडल-सामग्री में जोड़ते हैं। यह फैला हुआ दिखता है।

Answer 5

बूटस्ट्रैप के लिए 3 का उपयोग करें

$('#myModal').on('hidden.bs.modal', function () {
// do something…
})

Comments

बस इस छिपे हुए को जोड़ने के लिए। मोडल बंद होने के बाद। मोडल चालू होने पर बूटस्ट्रैप 3 पर आग लगाने के लिए show.bs.modal का उपयोग करें।

— d3c0y

यह किसी भी तरह या रूप में संवाद का आकार कैसे बदलेगा? यह बस एक कॉलबैक फ़ंक्शन है जो तब होता है जब मोडल संवाद छिपा हुआ होता है (या दिखाया गया है)।

— user1438038

Answer 6

मेरे लिए सरल सीएसएस काम

.modal-dialog { 
max-width : 100% ;
}

Answer 7

मैं बस सीएसएस को ओवरराइड करता हूं:

.modal-dialog {
    max-width: 1000px;
}

Answer 8

width:fit-contentमोडल div पर सेट करें।

Answer 9

आप ऐसा कर सकते हैं यदि आप gijgo.com से jquery डायलॉग प्लगइन का उपयोग करते हैं और ऑटो की चौड़ाई निर्धारित करते हैं।

$("#dialog").dialog({
  uiLibrary: 'bootstrap',
  width: 'auto'
});

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link href="http://code.gijgo.com/1.0.0/css/gijgo.css" rel="stylesheet" type="text/css">
  <script src="http://code.gijgo.com/1.0.0/js/gijgo.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="dialog" title="Wikipedia">
   <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1122px-Wikipedia-logo-v2.svg.png" width="320"/>
 </div>
</body>
</html>

आप उपयोगकर्ताओं को आकार को नियंत्रित करने की अनुमति दे सकते हैं यदि आप सत्य के लिए आकार बदलने योग्य हैं। आप इसके बारे में http://gijgo.com/Dialog/Demos/bootstrap-modal-reizable पर एक डेमो देख सकते हैं

Answer 10

एक सरल सीएसएस समाधान जो लंबवत और क्षैतिज रूप से मोडल को केंद्र में रखेगा:

.modal.show {
  display: flex !important;
  justify-content: center;
}

.modal-dialog {
  align-self: center;
}

Answer 11

बूटस्ट्रैप के लिए 2 ऑटो मॉडल की ऊंचाई को गतिशील रूप से समायोजित करें

  //Auto adjust modal height on open 
  $('#modal').on('shown',function(){
     var offset = 0;
     $(this).find('.modal-body').attr('style','max-height:'+($(window).height()-offset)+'px !important;');
  });

Answer 12

मुझे बूटस्ट्रैप 3 के साथ एक ही समस्या थी और मोडल-बॉडी डिव की ऊंचाई 442px से अधिक नहीं होनी चाहिए। यह मेरे मामले में इसे ठीक करने के लिए आवश्यक सभी सीएसएस था:

.modal-body {
    overflow-y: auto;
}

Answer 13

माइन सॉल्यूशन बस नीचे स्टाइल जोड़ने के लिए था। <div class="modal-body" style="clear: both;overflow: hidden;">

Answer 14

बूटस्ट्रैप 4 के रूप में - इसकी एक शैली है:

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
}

इसलिए यदि आप मोडल की चौड़ाई को कुछ चौड़ाई में बड़ा करना चाहते हैं, तो मैं उदाहरण के लिए आपके सीएसएस में इसका उपयोग करने का सुझाव दूंगा:

.modal-dialog { max-width: 87vw; }

ध्यान दें कि सेटिंग width: 87vw;बूटस्ट्रैप को ओवरराइड नहीं करेगी max-width: 500px;।

Answer 15

मेरी खोज ने मुझे यहां तक ​​पहुंचाया और साथ ही साथ मेरे दो सेंटों को विचार के लायक बनाया। यदि आप बंदर के अनुकूल ट्विटर बूटस्ट्रैप मोडल का उपयोग कर रहे हैं तो आप कुछ इस तरह से कर सकते हैं:

    var dialog = new BootstrapDialog({
        id: 'myDialog',
        title: 'Title',
        closable: false,
        // whatever you like configuration here...
    });

    dialog.realize();
    if (isContentAYoutubeVideo()) {
        dialog.getModalDialog().css('width', '80%'); // set the width to whatever you like
    }
    dialog.open();

उम्मीद है की यह मदद करेगा।