पॉपअप div

Question

मैं div जो मैं पॉपअप के रूप में दिखा रहा निम्नलिखित है के अलावा अन्य स्क्रीन के लिए पृष्ठभूमि काले बनाओ:

<div id="divOperationMessage" style="background-color: White; border: 2px solid black; 
      display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed; 
      padding-left: 10px;margin:auto;"> 

------------------Whatever content inside----------------------------- 

        </div> 

जब अपने दिखाया गया है, मैं आसानी से मुख्य पृष्ठभूमि में स्क्रीन के अन्य भाग देख सकते हैं।

इसके नीचे के रूप में देख रहा है:

मैं न पृष्ठभूमि स्क्रीन दिखाना चाहते हैं जब poup है (एंट्री सफलतापूर्वक अद्यतन ऊपर पॉपअप div है)।

मैं इसे काला बनाना चाहते ..

कैसे मैं इसे काला कर सकते हैं ??

मैं 0.75 को अस्पष्टता स्थापित करने के साथ करने की कोशिश की ... लेकिन यह है कि misconceptual prooved ... मेरा उद्देश्य हल नहीं किया ..

मैं इसके लिए क्या कर सकते हैं ???

कृपया मेरी मदद करें।

Answer 1

ठीक है यहाँ जाता जोड़ने!

<div style="height:100%;width:100%;position:absolute;top:0;left:0;background-color:#000000;display:none;"> 
    <div id="divOperationMessage" style="background-color: White; border: 2px solid black; 
     display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed; 
     padding-left: 10px;margin:auto;"> 

------------------Whatever content inside----------------------------- 

    </div> 
</div> 

मुझे आशा है कि इससे मदद मिलती है!

Answer 2

यहाँ मैं क्या करना होगा है:

100% चौड़ाई और ऊंचाई के साथ एक fixed div बनाएं;

इस निश्चित overlay के अंदर पॉपअप div डाल दें और इसे क्षैतिज और लंबवत केंद्र में रखें।

<div class="overlay"> 
    <div class="popup"> 
     Whatever code!! 
    </div> 
</div> 

सीएसएस

.overlay{ 
    position:fixed; 
    z-index:999; 
    width:100%; 
    height:100%; 
    background-color: black; 
    background-color:rgba(0,0,0,.75) 
} 

.popup{ 
    width:300px; 
    position:absolute; 
    left:50%; 
    top:100px; 
    margin-left:-150px; 
} 

Answer 3

आप मुख्य सामग्री पर जगह के लिए एक ओवरले div जोड़ने के लिए, और पॉपअप div नीचे की जरूरत है।

div.overlay { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    display: block; 
    top: 0; 
    left: 0; 
    background-color: rgba(0,0,0,.75); /*this sets the slightly see-through black*/ 
    z-index: 100; /*Make this less than the existing popup div*/ 
} 

Answer 4

इस

<div id="divOperationMessage" style="background-color: White; border: 2px solid black;display: block; width: 350px; z-index: 1001; top: 60px; left: 240px; position: fixed;padding-left: 10px;margin:auto;"> 

------------------Whatever content inside----------------------------- 

</div> 
<div class = 'black_bg' style = "position:fixed;width:100%;height:100%;opacity:0.75;background-color:#000"></div> 

प्रयास करें और जब भी आप पॉपअप दिखा रहे हैं, इस लाइन

$('.black_bg').show(); 

Answer 5

यदि आप jquery का उपयोग करना चाहते हैं, तो आप jquery मोडल सुविधा का उपयोग कर सकते हैं।

उपयोग करने में आसान! यहाँ

की जांच:

http://jqueryui.com/dialog/#modal

$(function() { 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     height:140, 
     modal: true, 
     buttons: { 
     "Delete all items": function() { 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 

इस में, यदि आप बटन पर क्लिक करें, या पॉपअप मेनू के बाहर है, यह बंद कर देता है। आपको उसे भी कोड करने की आवश्यकता नहीं है। लघु और compacT!

Answer 6

यहाँ एक FIDDLE

if($('#divOperationMessage').length > 0 && $('.mask').length < 1) { 
    $('body').append('<span class="mask"></span>'); 
} 

---

.mask { 
    background: rgba(0,0,0,0.8); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
}