جستجو
زمانی که متن خود را وارد می نمایید در صورت وجود اطلاعات ، اطلاعات مورد نظر بصورت همزمان و بدون زدن هیچ دکمه ای نمایش داده می شود.
عضویت در خبرنامه
جهت لغو عضویت کلیک نمایید
شمارشگر شبکه های اجتماعی
پسندیده
0
فیسبوک
0
توییتر
0
گوگل پلاس
0
لینک ادین
11
نمودار بازدید از موضوع ها
نویسنده : admin تعداد بازدید : ۴۶۲ تاریخ : سه شنبه,۲۹ مهر ۱۳۹۳
LiteBox با استفاده از سی اس اس و جی کوئری
امتیاز دهید
تعداد رای 0 امتیاز 0

این کد ، کد ساده ای برای 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 

comments powered by Disqus
تبلیغات
آخرین تصاویر
شهر تاریخی جیزد باغ شازده ماهان عمارت و باغ نشاط (سالار) تقی آباد غار پرده رستم کاروانسرای شاه عباس یونسی حلزون اسب در کوهستان بچه پنگوئن بچه میمون ديگو کاستا دنی آلوز میامی هیت پیرلو فرانچسکو توتی لیونل مسی طوطی دریا جاده زمستانی گورخر ... ... پل کلبه ببر
وضعیت آب و هوا
  • یزد
  • ارومیه
  • اصفهان
  • البرز
  • مشهد
  • شیراز
  • تبریز
  • تهران
  • زاهدان
  • اهواز
  • زنجان
  • رامسر
  • بابلسر
  • کرمانشاه
  • بندرعباس
  • کرمان
  • گرگان
  • یاسوج
  • همدان
  • آبادان
  • مکه
موضوعات مشابه