ओवरले बॉक्स स्क्रीन

Question

मैं कुछ जे एस कोड है कि एक काले रंग की पृष्ठभूमि fades और एक सफेद मोडल विंडो खुलती है, तो तरह के केंद्र में प्रदर्शित होने:

function open_litebox(link) { 
    var overlay_black = 'position:absolute;top:0%;left:0%;width:100%;height:100%;background:black;z-index:1001;opacity:0.5;'; 
    $('body').append('<div style="' + overlay_black + '"></div>'); 
    var overlay_white = 'position:absolute;top:25%;left:25%;padding:5px;background-color:white;z-index:1002;overflow:auto;'; 
    $('body').append('<div style="' + overlay_white + '"><p>heeeyyy</p></div>'); 
} 

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

किसी भी मदद की सराहना की जाती है, चीयर्स।

Answer 1

आप सामग्री भरी हुई है के बाद चौड़ाई और एक तत्व की ऊंचाई प्राप्त करने में सक्षम होना चाहिए (उस के लिए jquery सहायकों का उपयोग करके देखें -, width()height())

एक बार जब आप आयाम है तो गणना भी हो सकता है और उसके बाद तत्व की स्थिति। जब तक स्थिति को पूरा नहीं किया जाता है तब तक आप तत्व को छुपा भी रख सकते हैं ताकि उपयोगकर्ता को जंपनेस दिखाई न दे।

आप fancybox जैसी प्लगइन का भी उपयोग कर सकते हैं जो इस तरह की चीजों को वास्तव में सरल बनाता है।

Answer 2

आप अपने सफेद ओवरले बनाने के लिए इन शैलियों का उपयोग करने की आवश्यकता दिखाई मृत-सेंटर:

var overlay_white = 'position:absolute; 
        top:50%; 
        left:50%; 
        background-color:white; 
        z-index:1002; 
        overflow:auto; 
        width:400px; 
        height:400px; 
        margin-left:-200px; 
        margin-top:-200px'; 

तो position निर्दिष्ट किया जाना चाहिए। top और left50% होना चाहिए। margin-left और margin-top क्रमशः बॉक्स की चौड़ाई और ऊंचाई का नकारात्मक आधा होना चाहिए।

Answer 3

मुझे पता है कि यह एक पुराना सवाल है, लेकिन जब मैं विषय पर जा रहा था, तब यह आया, और मैं एक अद्यतन उत्तर प्रदान करना चाहता था।

सरफ्राज़ के उत्तर पर विस्तार, आपको चौड़ाई और ऊंचाई को स्पष्ट रूप से निर्दिष्ट करने की आवश्यकता नहीं है। इन अज्ञात हैं (या आप उन्हें सेट नहीं करना चाहते हैं), तो आप अपने स्टाइल में निम्न का उपयोग कर सकते हैं:

position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

बदलने लाइन आप के लिए चौड़ाई और ऊंचाई का पता लगा लेता।