मेरे पास एक पॉप-अप div है जो फ़ाइल अटैचमेंट के आधार पर वीडियो स्ट्रीम करने या दस्तावेज़/छवि दिखाने में सक्षम है।
मेरे पास जो समस्या है वह यह सुनिश्चित कर रही है कि यह डेस्कटॉप और मोबाइल ब्राउज़र/ऐप दोनों के लिए लंबवत और क्षैतिज रूप से केंद्रित है।
मैं अलग-अलग विशेषताओं की कोशिश कर रहा हूं, लेकिन ऐसा लगता है कि मेरे पास पहले से जो कुछ है उससे मैं बदल गया हूं और अचानक यह पृष्ठ से बाहर है।
if(extension === "mp4"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><video id="VideoLauncher" width="600" controls controlsList="nodownload"><source src="'+file+' " type="video/mp4"><!--Browser does not support <video> tag --></video></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "jpg"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><img id="VideoLauncher" width="600" src="'+file+'" onclick="lightbox_close()"></img></div><div id="fade" onClick="lightbox_close();"></div>'
}
if(extension === "pdf" || extension === "doc" || extension === "docx"){
document.body.innerHTML += '<div id="light"><a class="boxclose" id="boxclose" onclick="lightbox_close();">x</a><iframe src="https://docs.google.com/gview?url='+file+'&embedded=true" style="height:800px; width:600px;" frameborder="0"></iframe></div><div id="fade" onClick="lightbox_close();"></div>'
}
var LightEle = document.querySelector("#light");
var FadeEle = document.querySelector("#fade");
var BoxCloseEle = document.querySelector("#boxclose");
LightEle.style.cssText = 'display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 100%px; margin-left: -200px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible;';
FadeEle.style.cssText = 'display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80);';
आदर्श रूप से, जो मैं खोज रहा हूं वह स्टाइल है जो गतिशील रूप से प्रकाश तत्व को क्षैतिज और लंबवत रूप से केंद्रित करेगा, हालांकि प्रकाश तत्व फ़ाइल को दिखाने के आधार पर एक अलग आकार होगा। इस वजह से मैं ऊंचाई और चौड़ाई को हार्ड कोड नहीं कर सकता।
1 उत्तर
लंबवत और क्षैतिज रूप से केंद्र तत्वों के लिए एक लोकप्रिय दृष्टिकोण का उपयोग करना है:
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
आप इसका उपयोग पूर्ण या निश्चित स्थिति निर्धारण के साथ कर सकते हैं। top और left ऊपरी बाएं कोने को स्क्रीन के केंद्र में ले जाते हैं जबकि translate( -50%, -50% ) तत्व को बाईं ओर ले जाते हैं और तत्वों की चौड़ाई/ऊंचाई के शीर्ष 50% को केंद्र में रखते हैं। पृष्ठ के केंद्र में तत्व।
.box {
position: fixed;
top: 50%;
left: 50%;
transform: translate( -50%, -50% );
/* For Demo */
width: 75vw;
height: 75vh;
background-color: #ccc;
}<div class="box"></div>