LiteBox با استفاده از سی اس اس و جی کوئری - جی کوئری


تاریخ : سه شنبه,۲۱ دی ۱۳۹۵ تعداد بازدید :402

این کد ، کد ساده ای برای Lightbox به کمک سی اس اس و جی کوئری می باشد.

<!DOCTYPE html>
<html>
<head>
<title>CSS JS light Box :devzone.co.in </title>
<!--
CSS JS Litebox
Downloaded from http://devzone.co.in/
-->
<style type="text/css">
#ark_ulayer{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; -moz-opacity:0.5; opacity:.50; filter:alpha(opacity=50); }
#ark_lb{ display:none; width:95%; height:380px; margin: 15px auto auto; background-color:#fff; }
#ark_lb_par{ margin:0 auto; position:fixed; top:100px; left:25%; width:50%; height:412px; display:none; background: rgb(255, 245, 92) transparent; background: rgba(255, 245, 92, 0.6);/* Modify Gradient Filter here: http://samples.msdn.microsoft.com/workshop/samples/author/filter/gradient.htm */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFCC00, endColorstr=#50FFCC00); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFCC00, endColorstr=#50FFCC00)"; }
.cls_btn{ text-decoration: none; position: absolute; right: 0; top: 0; padding: 0 4px; background: none repeat scroll 0 0 #FF0000; color: #FFFFFF; font-size: 14px; }
</style>
<script>
function show_box()
{
document.getElementById("ark_ulayer").style.display="block";
document.getElementById("ark_lb_par").style.display="block";
document.getElementById("ark_lb").style.display="block";
}

function hide_box()
{
document.getElementById("ark_ulayer").style.display="none";
document.getElementById("ark_lb_par").style.display="none";
document.getElementById("ark_lb").style.display="none";
}
</script>
</head>
<body>
<a href="javascript:void();" onclick="show_box()">Click Here</a>
<div id="ark_ulayer"></div>
<div id="ark_lb_par">
<div id="ark_lb">Content</div>
<a href="javascript:void();" onclick="hide_box();" class="cls_btn">X</a>
</div>
<script>
(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
ga("create", "UA-43091346-1", "devzone.co.in");
ga("send", "pageview");

</script>
</body>
</html>

دمو نهایی LiteBox


منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید



دیدگاه خودتان را ارسال کنید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز با * علامت گذاری شده اند.






star TOP 10

  • مقالات
  • بیمارستان
  • دکتر
  • دارو


مطالب این سایت تنها جنبه اطلاع رسانی و آموزشی داشته و توصیه پزشکی تخصصی تلقی نمی شوند و نباید آنها را جایگزین مراجعه به پزشک جهت تشخیص و درمان دانست.
هشدار! تجويز و تعيين دوز دارو به عهده پزشک مي باشد و پورتال پادرا هيچگونه مسئوليتي در خصوص مصرف خود سرانه دارو ندارد