अलर्ट ओवरलैप कैसे करें?

Question

आरई: http://twitter.github.io/bootstrap/components.html#alerts

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

मैं किसी दिए गए समय में इनमें से एक से अधिक अलर्ट प्रदर्शित कर सकता हूं। उन लोगों के लिए, मुझे लगता है कि मुझे उन्हें प्रत्येक चेतावनी के शीर्ष पर ढेर करने की आवश्यकता होगी (अन्यथा, उपयोगकर्ता उन्हें पढ़ने में सक्षम नहीं होंगे)।

मैं यह कैसे कर सकता हूं? सीएसएस केवल समाधान पसंद किया। गैर-टीबी के लिए खुला, jQuery समाधान अगर बिल्कुल जरूरी है।

Answer 1

आप उन्हें प्रवाह से बाहर poping, एक निरपेक्ष स्थिति में कंटेनर में अलर्ट जगह कर सकते हैं:

.alerts { 
    position: absolute; 
    top: 30px; 
    left: 20px; 
    right: 20px; 
} 

<div class="main"> 
    <h1>Heading</h1> 
    <p> 
    Some content here... 
    </p> 
</div> 
<!-- the order of elements is insignificant (you can swap the main 
    container and the alerts container and have the same result) --> 
<div class="alerts"> 
    <div class="alert">alerting...</div> 
    <div class="alert">alerting once more...</div> 
</div> 

यह (सीएसएस हुक के साथ) बूटस्ट्रैप कथात्मक घटकों का उपयोग का प्रदर्शन किया है, लेकिन यह भी का उपयोग कर काम करेगा बूटस्ट्रैप अनिवार्य एपीआई (जावास्क्रिप्ट कॉल द्वारा)।

यहां एक live demo on plunker दिखा रहा है।