ट्विटर बूटस्ट्रैप मोडल फुल स्क्रीन कैसे बनाये

Question

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <%= image_tag "Background.jpg" %>
  </div>
</div>

उपरोक्त कोड के लिए मैं एक ट्विटर बूटस्ट्रैप मोडल पॉपअप फुल स्क्रीन कैसे बनाऊं, मैंने सीएसएस के साथ खेलने की कोशिश की, लेकिन मुझे जैसा चाहिए था, वैसा नहीं मिला। किसी को भी कृपया मेरी मदद कर सकते हैं इसके साथ

Answer 1

मैंने इसे बूटस्ट्रैप 3 में निम्नलिखित कोड के साथ हासिल किया:

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

सामान्य तौर पर, जब आपके पास मुद्दों / स्पेसिंग पैड्स के बारे में सवाल होते हैं, तो तत्व पर राइट + क्लिक (या cmd + क्लिक करके) करने की कोशिश करें और क्रोम पर "इंस्पेक्ट एलिमेंट" का चयन करें या फ़ायरफ़ॉक्स पर "फ़ायरबग के साथ तत्व का निरीक्षण करें"। "तत्वों" पैनल में अलग-अलग एचटीएमएल तत्वों का चयन करने और वास्तविक समय में दाईं ओर सीएसएस को संपादित करने का प्रयास करें जब तक कि आप पैडिंग / रिक्ति नहीं चाहते।

यहाँ एक लाइव डेमो है

यहाँ एक कड़ी के लिए लिंक है

Comments

मैं भी जोड़ते हैं वह margin: 0करने के लिए .modal-dialog।

— harrison4

BTW: .modal-contentजब ऊँचाई नीचे की ओर झुकती है और नीचे स्क्रॉल होती है तो उसकी ऊँचाई टूट जाती है। यह होना चाहिएmin-height: 100%; height: auto;

— यानिक रोचॉन

यदि मोबाइल ऐप के लिए डिज़ाइन किया गया है, तो आप व्यापक स्क्रीन @media (अधिकतम-चौड़ाई: 768px) {...}

— निकोलस कनॉट

आप .modal {गद्दी: ... px} भी जोड़ सकते हैं यदि आपको "लगभग" पूर्ण स्क्रीन मोडल की आवश्यकता है

— andrii

.modal-dialogबूटस्ट्रैप 4 केmax-width: 100%; लिए भी जरूरत है

— आनंद रॉकज

Answer 2

चुना समाधान गोल कोने की शैली को संरक्षित नहीं करता है। गोल कोनों को संरक्षित करने के लिए, आपको चौड़ाई और ऊंचाई को थोड़ा कम करना चाहिए और सीमा त्रिज्या 0. को हटा देना चाहिए। इसके अलावा यह ऊर्ध्वाधर स्क्रॉल पट्टी को नहीं दिखाता है ...

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Comments

एक अधिक सही उत्तर जो गोल कोनों के साथ मॉडल की भावना को बरकरार रखता है, स्वीकृत उत्तर मोडल के बजाय एक ओवरले परत प्रस्तुत करता है

— क्लैन डीसिल्वा

यदि मोडल पूर्ण स्क्रीन पर कब्जा कर रहा है, तो यह भयानक होगा (IMHO) यदि आपके चारों ओर गोल कोने हैं।

— दिवालिएपन

Answer 3

बूटस्ट्रैप 4 के लिए मुझे अधिकतम-चौड़ाई के साथ मीडिया क्वेरी को जोड़ना होगा: कोई नहीं

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

.modal-dialog {
  width: 98%;
  height: 92%;
  padding: 0;
}

.modal-content {
  height: 99%;
}

Answer 4

मैं फुलस्क्रीन मॉडल्स के लिए "उत्तरदायी" समाधान के साथ आया हूं:

फुलस्क्रीन मोडल जिन्हें केवल कुछ विशेष ब्रेकप्वाइंट पर ही सक्षम किया जा सकता है । इस तरह यह मोडल (डेस्कटॉप) स्क्रीन पर "सामान्य" और छोटे (टैबलेट या मोबाइल) स्क्रीन पर फुलस्क्रीन प्रदर्शित करेगा , जो इसे एक मूल ऐप की भावना देता है।

बूटस्ट्रैप 3 और बूटस्ट्रैप 4 के लिए लागू किया गया ।

बूटस्ट्रैप v4

निम्नलिखित सामान्य कोड काम करना चाहिए:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}
.modal .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal .modal-body {
  overflow-y: auto;
}

नीचे दिए गए scss कोड को शामिल करके, यह निम्नलिखित वर्गों को उत्पन्न करता है जिन्हें .modalतत्व में जोड़ने की आवश्यकता होती है :

+---------------+---------+---------+---------+---------+---------+
|               |   xs    |   sm    |   md    |   lg    |   xl    | 
|               | <576px  | ≥576px  | ≥768px  | ≥992px  | ≥1200px |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen    |  100%   | default | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-sm |  100%   |  100%   | default | default | default | 
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-md |  100%   |  100%   |  100%   | default | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-lg |  100%   |  100%   |  100%   |  100%   | default |
+---------------+---------+---------+---------+---------+---------+
|.fullscreen-xl |  100%   |  100%   |  100%   |  100%   |  100%   |
+---------------+---------+---------+---------+---------+---------+

Scss कोड है:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
  }

  .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }

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

}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .modal-fullscreen#{$infix} {
      @include modal-fullscreen();
    }
  }
}

कोडपेन पर डेमो: https://codepen.io/andreivictor/full/MWYNPBV/

---

बूटस्ट्रैप v3

इस विषय (@Chris J, @kkarli) पर पिछली प्रतिक्रियाओं के आधार पर, निम्न जेनेरिक कोड को काम करना चाहिए:

.modal {
  padding: 0 !important; // override inline padding-right added from js
}

.modal .modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal .modal-content {
  height: auto;
  min-height: 100%;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
}

यदि आप उत्तरदायी फ़ुलस्क्रीन मोडल का उपयोग करना चाहते हैं, तो निम्न वर्गों का उपयोग करें जिन्हें .modalतत्व में जोड़ने की आवश्यकता है :

• .modal-fullscreen-md-down- मोडल स्क्रीन से छोटे स्क्रीन के लिए फुलस्क्रीन है 1200px।
• .modal-fullscreen-sm-down- मोडल स्क्रीन से छोटे स्क्रीन के लिए फुलस्क्रीन है 922px।
• .modal-fullscreen-xs-down- मोडल स्क्रीन से छोटे के लिए फुलस्क्रीन है 768px।

निम्नलिखित कोड पर एक नज़र डालें:

/* Extra small devices (less than 768px) */
@media (max-width: 767px) {
  .modal-fullscreen-xs-down {
    padding: 0 !important;
  }
  .modal-fullscreen-xs-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-xs-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  } 
}

/* Small devices (less than 992px) */
@media (max-width: 991px) {
  .modal-fullscreen-sm-down {
    padding: 0 !important;
  }
  .modal-fullscreen-sm-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Medium devices (less than 1200px) */
@media (max-width: 1199px) {
  .modal-fullscreen-md-down {
    padding: 0 !important;
  }
  .modal-fullscreen-md-down .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }
}

---

डेमो कोडपेन पर उपलब्ध है: https://codepen.io/andreivictor/full/KXNdoO ।

---

जो एक पूर्वप्रक्रमक के रूप में Sass का उपयोग करते हैं, वे निम्नलिखित मिश्रण का लाभ उठा सकते हैं:

@mixin modal-fullscreen() {
  padding: 0 !important; // override inline padding-right added from js

  .modal-dialog {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
  }

}

Answer 5

निम्न वर्ग बूटस्ट्रैप में एक पूर्ण-स्क्रीन मोडल बनाएगा:

.full-screen {
    width: 100%;
    height: 100%;
    margin: 0;
    top: 0;
    left: 0;
}

मुझे यकीन नहीं है कि आपके मॉडल की आंतरिक सामग्री कैसे संरचित है, इससे सीएसएस के आधार पर समग्र ऊंचाई पर प्रभाव पड़ सकता है जो इसके साथ जुड़ा हुआ है।

Comments

.fullscreen क्या है? मैंने #myModal में css को शामिल किया, यह चौड़ाई के लिए काम करता है लेकिन ऊँचाई में नहीं।

— हृषिकेश सरदार

.fullscreenएक वर्ग है जिसे मैंने इस मुद्दे को हल करने के लिए बनाया है, यह बूटस्ट्रैप में शामिल नहीं है। क्या आप JSFiddle या CodePen पर अपने कोड का एक नमूना पोस्ट कर सकते हैं ? मैं आपका कोड देखे बिना आपकी मदद नहीं कर सकता।

— माइकमाकिंगकिंग

ऊंचाई जोड़ने के लिए आपको #myModal पर नहीं, मॉडल-बॉडी पर ऊंचाई जोड़ने की आवश्यकता है।

— कासिमरामजान

Answer 6

बूटस्ट्रैप 4 के लिए

कक्षाएं जोड़ें:

.full_modal-dialog {
  width: 98% !important;
  height: 92% !important;
  min-width: 98% !important;
  min-height: 92% !important;
  max-width: 98% !important;
  max-height: 92% !important;
  padding: 0 !important;
}

.full_modal-content {
  height: 99% !important;
  min-height: 99% !important;
  max-height: 99% !important;
}

और HTML में:

<div role="document" class="modal-dialog full_modal-dialog">
    <div class="modal-content full_modal-content">

Answer 7

टुकड़ा @Chris जम्मू से मार्जिन और अतिप्रवाह के साथ कुछ मुद्दों था। @ क्रिस जोंड के फिडेल पर आधारित @YanickRochon और @ जोना द्वारा प्रस्तावित परिवर्तन, निम्नलिखित jsfiddle में पाए जा सकते हैं ।

यह CSS कोड है जो मेरे लिए काम करता है:

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}

Answer 8

आपको नीचे अपना DIV टैग सेट करना होगा।

अधिक जानकारी प्राप्त करें> http://thedeveloperblog.com/bootstrap-modal-with-full-size-and-scrolling

</style>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
   More Details
</button>
</br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-content">
        <div class="container">;
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title" id="myModalLabel">Modal Title</h3>
          </div>
              <div class="modal-body" >
                Your modal text 
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
    </div>                                      
</div>

Answer 9

समाधान की मेरी विविधता: (scss)

  .modal {
        .modal-dialog.modal-fs {
            width: 100%;
            margin: 0;
            box-shadow: none;
            height: 100%;
            .modal-content {
                border: none;
                border-radius: 0;
                box-shadow: none;
                box-shadow: none;
                height: 100%;
            }
        }
    }

(सीएसएस)

.modal .modal-dialog.modal-fs {
  width: 100%;
  margin: 0;
  box-shadow: none;
  height: 100%;
}
.modal .modal-dialog.modal-fs .modal-content {
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-shadow: none;
  height: 100%;
}

Answer 10

.modal.in .modal-dialog {
 width:100% !important; 
 min-height: 100%;
 margin: 0 0 0 0 !important;
 bottom: 0px !important;
 top: 0px;
}


.modal-content {
    border:0px solid rgba(0,0,0,.2) !important;
    border-radius: 0px !important;
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.5) !important;
    box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
    height: auto;
    min-height: 100%;
}

.modal-dialog {
 position: fixed !important;
 margin:0px !important;
}

.bootstrap-dialog .modal-header {
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important;
}


@media (min-width: 768px)
.modal-dialog {
    width: 100% !important;
    margin: 0 !important;
}

Comments

अधिक स्पष्ट रूप से समझाने की कोशिश करें कि यह प्रश्न का उत्तर क्यों है।

— जीरो हियर

Answer 11

इसे इस्तेमाल करो:

.modal-full {
    min-width: 100%;
    margin: 0;
}

.modal-full .modal-content {
    min-height: 100vh;
}

इसलिए:

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

    </div>
</div>