सीएसएस और एचटीएमएल और JQuery - अन्य divs पर div को प्रदर्शित करने के लिए कैसे करें और उन्हें एक छायादार पृष्ठभूमि सेट करें

मुझे इस तरह की कुछ चीज़ों की आवश्यकता है: जब मैं कुछ लिंक पर क्लिक करता हूं, तो पूरा पृष्ठ छायादार होना चाहिए, और मैं प्रदर्शित करना चाहता हूं पृष्ठ के केंद्र में एक नया div (200px X 200px), अन्य div (इसलिए "फ्लोट" नहीं) पर।सीएसएस और एचटीएमएल और JQuery - अन्य divs पर div को प्रदर्शित करने के लिए कैसे करें और उन्हें एक छायादार पृष्ठभूमि सेट करें

राहत पर इस नए div को डालने की तरह और अन्य div (बैकगाउंड) को अनजाने में प्रस्तुत करें।

मैं यह कैसे कर सकता हूं? मुझे लगता है कि सीएसएस यह करना चाहिए, और मुझे आशा है कि मेरे अनुरोध स्पष्ट :)

धन्यवाद

अद्यतन (मेरे अपने कोड जोड़ा)

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <div id="myBox" class="boxHidden"> 
      Box I Want To Display 
     </div> 

     <div class="contenitoreSite"> 
      <script type="text/javascript"> 
       $(document).ready(function() { 
        $(".articles").click(function() { 
         $('.contenitoreSite').fadeTo('fast', 0.5); 
         $('#myBox').removeClass().addClass('box'); 
         $('#myBox').fadeTo('fast', 1); 
        }); 
       }); 
      </script> 

      <a class="articles" href="#" onclick="return false;">Example</a> 
     </div> 
    </div> 
</body> 

// CSS 
.boxHidden{display:none;} 
.box{width:500px; height:500px; position:absolute; top:80px; left:240px; border:#000000 2px solid; background-color:#FF0000;} 
.contenitore{width:980px; margin:0 auto; position:relative;} 
.contenitoreSite{width:980px; margin:0 auto;}

मेरे वास्तविक समस्याओं है:

1 - मैं अस्पष्टता के साथ पूरा पृष्ठ (बॉक्स को छोड़कर) रखना चाहता हूं। लेकिन इस समारोह के साथ, प्रत्येक बच्चे को अस्पष्टता 0.5 मान मिलती है। मैं इसे कैसे ठीक करूं? This इस समय यह कैसे दिखाया गया है।

2 - इस विशेषता अस्पष्टता पार ब्राउज़र है? क्योंकि मैंने पढ़ा है कि आईई 7 इसका समर्थन नहीं करता है, लेकिन JQuery के साथ मुझे इन प्रकार की समस्याओं को ठीक करना चाहिए।

3 - मैं पृष्ठभूमि (छायादार एक) को अनजान रखना चाहता हूं। मैं यह करने के लिए संभव है लगता है ...

हल

// HTML + Jquery 
<body> 
    <div class="contenitore"> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(".articles").click(function() { 
        var maskHeight = $(document).height(); 
        var maskWidth = $(window).width(); 
        $('.mask').css({'width':maskWidth,'height':maskHeight}); 
        $('.mask').fadeIn(100); 
        $('.mask').fadeTo("fast",0.8); 

        var winH = $(window).height(); 
        var winW = $(window).width();   
        $("#myBox").removeClass().addClass('box');   
        $("#myBox").css('top', winH/2-$("#myBox").height()/2); 
        $("#myBox").css('left', winW/2-$("#myBox").width()/2); 
        $("#myBox").fadeIn(1000); 
       }); 
      }); 
     </script> 

     <div id="myBox" class="boxHidden"> 
      Box I Want To Display 
     </div> 

     <a class="articles" href="#" onclick="return false;">Example</a> 
    </div> 

    <div class="mask"></div>       
</body>  

// CSS 
.contenitore{width:980px; margin:0 auto; font-size:14px; color:#000000;} 
.boxHidden{display:none;} 
.box{width:500px; height:500px; position:absolute; z-index:9999; top:0px; left:0px; border:#000000 2px solid; background-color:#FF0000; display:none;} 
.mask {position:absolute; z-index:9000; top:0px; left:0px; background-color:#FFFFFF; display:none; }

इस संस्करण में क्रॉस-ब्राउज़र होना चाहिए। मुझे बताएं कि आप क्या सोचते हैं;)

स्रोत

2010-12-18 markzzz

अस्पष्टता पार ब्राउज़र नहीं है। गैर आईई = 'अस्पष्टता: 0।5 'आईई =' फ़िल्टर: अल्फा (अस्पष्टता = 50) ' – lnrbob

हाँ, लेकिन JQuery उस समस्या को ठीक करेगा जो मुझे लगता है :) – markzzz

मैं अच्छे चरित्र और मजबूत नैतिक फाइबर की पृष्ठभूमि का उपयोग करना पसंद करता हूं। अतीत में मैंने छायादार लोगों को चुरा लिया है। – Ben

वास्तव में ऐसा लगता है कि आपको fancybox या lightbox जैसे कुछ चाहिए।

आप इसे जावास्क्रिप्ट और सीएसएस का उपयोग करके स्वयं कर सकते हैं। यदि आप 'मोडल विंडो बनाना' google पर हैं तो आपको बहुत सारे परिणाम मिलते हैं। Here ऐसी मॉडल विंडो बनाने के लिए 20 प्लगइन और ट्यूटोरियल के साथ एक उदाहरण है।

स्रोत

2010-12-18 15:18:29 Tim

आप कुछ भी कल्पना के लिए नहीं देख रहे हैं, और यह बस यह कोशिश करना चाहते हैं तो:

<body> 
    <your content> 
    <div id="shader"> 
     <div id="window"> 
      <window content> 
     </div> 
    </div> 
</body>

और सीएसएस में जोड़ना: फिर

div#shader { 
    position: fixed; 
    top:0; 
    left:0; 
    background-image: url('gray70%opacity.png'); 
} 
div#window { 
    margin: auto; 
    background-color: white; 
    width: 200px; 
    height: 200px; 
}

, बस एक है जावास्क्रिप्ट फ़ंक्शन जो शेडर div की अस्पष्टता को बदलता है। यदि आप jQuery का उपयोग करते हैं, तो इसका बस: $('div#shader').fadeIn('fast')

स्रोत

2010-12-18 19:05:00 appi2012

आपकी दूसरी समस्या के लिए, मैं आपके ओवरले div को पैरेंट से हटा दूंगा, और अपना jQuery फ़ंक्शन दोनों को पहले div की अस्पष्टता को कम कर दूंगा और दूसरा दिखाऊंगा, कोड होगा:

<div id="MainContent"> 
</div> 
<div id="overlay"> 
</div>

jQuery:

$('div#MainContent').fadeTo('fast', 0.5) 
$('div#overlay').fadeTo('fast', 1)

स्रोत

2010-12-19 21:09:38 appi2012

सीएसएस और एचटीएमएल और JQuery - अन्य divs पर div को प्रदर्शित करने के लिए कैसे करें और उन्हें एक छायादार पृष्ठभूमि सेट करें

उत्तर

संबंधित मुद्दे