फाउंडेशन 5 कैसे पॉपअप उत्तरदायी बनाने के लिए?

Question

मैं फाउंडेशन के नवीनतम संस्करण फाउंडेशन 5 का उपयोग कर रहा हूं, मैं अपने प्रोजेक्ट में रीवेल पॉपअप का उपयोग करना चाहता हूं, मैंने निम्नलिखित कोड और .js फ़ाइलों का उपयोग करके कार्यान्वित करने की कोशिश की।

यह लैपटॉप और टैबलेट जैसे बड़े प्रदर्शनों में ठीक काम कर रहा है, लेकिन यह ठीक से दिखाई नहीं है जब मैं तो मोबाइल की तरह छोटे उपकरणों में मेरा पेज को खोलने का प्रयास मैं सही और अपने मोबाइल स्क्रीन में छोड़ दिया पूरे पॉपअप को देखने के लिए यात्रा करने के लिए की है।

• शामिल सीएसएस

  <link href="../../Content/foundation/css/foundation.css" rel="stylesheet" type="text/css" /> <link href="../../Content/foundation/css/normalize.css" rel="stylesheet" type="text/css" />

• एचटीएमएल हिस्सा

अगर मेरी उपरोक्त कोड में कुछ भी याद आया तो कृपया मेरी मदद करें या मुझे सुझाव दें।

• छवि 2

Answer 1

उपयोग नींव के दशक में निर्मित ग्रिड वर्गों large-10 small-10 medium-10

<div id="myModal" class="reveal-modal large-10 small-10 medium-10 columns" data-reveal> 
    <h2>Popup title.</h2> 
    <p class="lead">Your couch. It is mine.</p> 
    <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p> 
    <a class="close-reveal-modal">&#215;</a> 
</div> 

और तुम सीएसएस की इस पंक्ति को दूर करने के लिए है:

.reveal-modal { 
    width: 100vw; //remove this line from your css 
} 

Answer 2

_reveal.scss@media #{$small-only} अनुभाग संपादित करें।

पंक्ति जोड़ें width: 90vw;

यह ऐसा दिखाई देगा जब आप समाप्त कर:

@media #{$small-only} { 
    min-height:100vh; 
    width: 90vw; 
} 

तुम भी लाइन min-height:100vh; निकाल सकते हैं अगर आप मॉडल नहीं करना चाहती खड़ी मोबाइल पर स्क्रीन को भरने के उपकरण।

इस समाधान को ग्रिड कॉलम के उपयोग की आवश्यकता नहीं है।

Answer 3

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

.reveal-modal { 
    box-sizing:border-box; 
    min-height:0 /* If you want to remove the full viewport height effect */ 
}