Pure CSS Simple PopUp Message Box
কিছু কিছু ওয়েবসাইটে দেখবেন বেল আইকন থাকে এবং সেখানে ক্লিক করলে সাইটের একটি ব্রিফ দেখানো হয় অথবা ভিজিটরদের উদ্দেশ্যে কিছু বলার থাকলে সেখানে দেওয়া হয় । এমন একটি কোড আজকে শেয়ার করবো যেখানে শুধুমাত্র CSS ব্যবহার করে আপনি ওয়েবসাইটে বেল আইকন বসাতে পারবেন ।
<style>
.popup-link{display:flex;flex-wrap:wrap;}
.popup-link a{background: #333;color: #fff;padding: 10px 30px;border-radius: 5px;font-size:17px;cursor:pointer;margin:20px;text-decoration:none;}
.popup-container {visibility: hidden;opacity: 0;transition: all 0.3s ease-in-out;transform: scale(1.3); position: fixed;z-index: 9999999;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(21, 17, 17, 0.61);display: flex;align-items: center;}
.popup-content {background-color: #fefefe;margin: auto;padding: 20px;border: 1px solid #888;width: 50%;}
.popup-content p{font-size: 17px;padding: 10px;line-height: 20px;}
.popup-content a.close{color: #aaaaaa;float: right;font-size: 28px;font-weight: bold;background: none;padding: 0;margin: 0;text-decoration:none;}
.popup-content a.close:hover{color:#333;}
.popup-content span:hover,
.popup-content span:focus {color: #000;text-decoration: none;cursor: pointer;}
.popup-container:target{visibility: visible;opacity: 1;transform: scale(1);}
</style>
এতটুকুই যথেষ্ট এতেই কাজ হয়ে যাবে । কিন্তু আপনি যদি কোনো ইফেক্ট দিতে চান সেক্ষাত্রে আরো কিছু কোড সংযুক্ত করা লাগবে । এবার HTML দেখে নিন -
<div class="popup-link">
<a href="#popup1">Click Me (Style 1)</a>
</div>
<!--popup1-->
<div class="popup-container" id="popup1">
<div class="popup-content">
<a class="close" href="#">×</a>ভিজিটরদের উদ্দেশ্যে কিছু বলতে চাইলে এখানে লিখে ফেলুন !
</div>
</div>