मैं पूरे पृष्ठ को कैसे गहरा कर सकता हूं? (एचटीएमएल)

जब मैं इसे करने के लिए किसी अन्य div का उपयोग करता हूं, तो यह अन्य डोम वर्गों को प्रभावित नहीं करेगा, इसलिए जब मैं पूरा पृष्ठ गहरा होना चाहता हूं तो मुझे प्रत्येक डोम क्लास को संशोधित करना होगा।मैं पूरे पृष्ठ को कैसे गहरा कर सकता हूं? (एचटीएमएल)

क्या पूरे दस्तावेज़ को ग्रे पारदर्शी विमान के साथ ओवरलैप करने का कोई तरीका है?

स्रोत

2015-05-11 Sahkan

http://stackoverflow.com/quest आयन/18065 9 27/बटन-टू-डार्क-द-पूरे-पेज – tharif

एक codepen अपनी आवश्यकताओं ilustrating नहीं है कैसे करना है। (देखें एक dismissable पॉपअप बनाने और मंद)

HTML:

<div class="wrapper"> 
    <button class="btn btn-success dim">Dim the page!</button> 
    <div class="dimmer"> 
    <span class="exit">&times;</span> 
    </div> 
    <div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum vel itaque fuga fugit fugiat enim excepturi nihil aperiam soluta ex nemo quam consectetur blanditiis dolores quisquam temporibus voluptatem veritatis distinctio neque labore ullam dicta delectus aspernatur odio ipsam. Sit est tempora odit neque fuga sapiente velit aliquid dignissimos ratione perspiciatis animi ullam incidunt veritatis quo eligendi esse aperiam qui vitae praesentium nam! Necessitatibus sequi maiores facere non numquam nesciunt veniam dignissimos aperiam consectetur saepe excepturi mollitia id tempora vero labore ducimus impedit iusto perspiciatis aliquam optio distinctio debitis quibusdam nulla dicta repellat praesentium ullam cupiditate totam soluta voluptatibus blanditiis recusandae!</p> 
    </div> 
</div>

सीएसएस:

.wrapper { 
    padding: 2.5em; 
    margin: 0 auto; 
    width: 80%; 
} 

.dimmer { 
    display: none; 
    background: #000; 
    opacity: 0.5; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
} 

.dim { 
    display: block; 
    margin: 2em auto; 
    z-index: 200; 
} 

.exit { 
    font-size: 100px; 
    color: red; 
    position: absolute; 
    top: 2px; 
    left: 2px; 
    opacity: 1; 
    cursor: pointer; 
}

जावास्क्रिप्ट:

$(function() { 
    var dimmerButton = $('.dim'); 
    var dimmer = $('.dimmer'); 
    var exit = $('.exit'); 
    dimmerButton.on('click', function() { 
    dimmer.show(); 
    }); 
    exit.on('click', function() { 
    dimmer.hide(); 
    }); 
});

नोट: इस के लेखक @srikarg

स्रोत

2015-05-11 06:43:08

धन्यवाद! यह वही है जो मुझे चाहिए :) – Sahkan

इसे एक संकल्प के रूप में चिह्नित करें! :) –

आप सीएसएस के साथ अपने शरीर को एक background-color जोड़ सकते हैं:

#overlay { 
    background-color: rgba(0,0,0,0.5); /* your color */ 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

डेमो: http://jsfiddle.net/6gahqaej/2

स्रोत

2015-05-11 06:38:14

धन्यवाद, बात यह है कि जब मैं पूरे पृष्ठ को अंधेरा करता हूं, तो मुझे सामान्य अस्पष्टता वाले पॉपअप विंडो को दिखाने की आवश्यकता होती है। अंधेरा पृष्ठ यह इंगित करने के लिए है कि उपयोगकर्ता को केवल उस खिड़की पर ध्यान देना चाहिए जो पॉप अप हो गया है। – Sahkan

आप एक उपरिशायी div

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

यह स्थिति तय

दिखाने के लिए की आवश्यकता होगी

#overlay { 
    background-color: rgba(0,0,0,0.5); 
    position:fixed; 
    left:0; 
    top: 0; 
    width:100%; 
    height:100%; 
}

और यह उनके सामने प्रस्तुत करें जब आप पृष्ठ काला कर करना चाहते हैं, यहाँ आप यह

$(function(){ 
 
    //Am hiding the overlay after 2 sec 
 
    $("#overlay").delay(3000).hide(200); 
 
})

#overlay { 
 
     background-color: rgba(0,0,0,0.5); 
 
     position:fixed; 
 
     left:0; 
 
     top: 0; 
 
     width:100%; 
 
     height:100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
    <div id="overlay"></div> 
 
    <h1>My Awesome Page</h1> 
 
</body>

स्रोत

2015-05-11 06:42:12 Saqueib

मैं पूरे पृष्ठ को कैसे गहरा कर सकता हूं? (एचटीएमएल)

उत्तर

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