कैसे जावास्क्रिप्ट और सीएसएस का उपयोग कर एक मॉडल पॉपअप बनाने के लिए

Question

वास्तव में, दो सवाल:

• मैं ग्रे की पृष्ठभूमि का रंग के साथ एक मॉडल पॉपअप बना सकते हैं कैसे?
• इसके अलावा, मैं केवल तालिका खुद के लिए एक कवर पृष्ठभूमि रंग के लिए बनाने के लिए की जरूरत है। समग्र पृष्ठ पर नहीं।

मैं इस जावास्क्रिप्ट और सीएसएस का उपयोग कर कैसे करते हैं?

Answer 1

यहां HTML है, जिसे शायद जेएस के साथ डाला जाना चाहिए, और शैली बाहरी स्टाइलशीट में होनी चाहिए।

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div> 

फिर, आप इसे प्रदर्शित करने के लिए jQuery का लाभ उठा सकते हैं।

$('a.modal').bind('click', function(event) { 
    event.preventDefault(); 
    $('#modal').fadeIn(800); 
}); 

यह केवल एक शुरुआत है, आप इससे सीखना और उस पर निर्माण करना चाहते हैं। उदाहरण के लिए, स्क्रिप्ट को is(':hidden') जांचना चाहिए और दिखाएं, और यदि नहीं तो fadeOut(800) या समान।

Answer 2

मैं मुखौटा है कि स्क्रीन

.Mask { 
    display: none; 
    width: 100%; 
    height: 100%; 
    z-index: 9000; 
    padding: 0px; 
    margin: 0px; 
    background: transparent url(http://i.imgur.com/0KbiL.png); 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
}