إضافة رسالة منبثقة بتقنية lightbox

الأربعاء، 4 مارس 2015

إضافة رسالة منبثقة بتقنية lightbox

طبعا اول شئ لاحظته مع دخولك الموضوع هو ظهور رسالة منبثقه وهذه هي المعاينة الخاصة بموضوعنا هذه الرسالة يمكنك تخصيصها بأى شئ لعرضه ادوات صور كلمات كل ما تريد يمكنك ان تضيفه في الآداة وصندوق المتابعة ما هو الا مثال واحد مما يمكن عمله بتلك الإضافة لكن يجب ان اعرفك بالإضافة وتقنيتها هي إضافة تعمل بتقينة JQuery Lightbox والتي سبق أن شرحناها في *** وهذا هو تطبيق اضافي على الخاصية التي تتعدد مزاياها واستخداماتها انا لن اطيل عليكم وسانقلكم مباشرة للجانب العملي

فقط اضف الكود التالي داخل آداة HTML/JavaScript

 <style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:999999; overflow:hidden;}
#colorbox {z-index: 99999999;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
#cboxOverlay{background:#bbb; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox {
  background-color:#fff;
  border: 5px solid #000;
  border-radius: 2px;
  outline: 0 none;
}
#cboxClose {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfZXAck_Z6DCyh1udRha-uasOM6_7EOvtPC1q2XgYFfUs9mjnFcdJxxWgkDgo1_3YjJH6pqHNETkBvFk1polDJAQ-0ILKTdQS72CJFNPVzlHgcCj5BjJO5mZ-LIEiB-mEL_z1z9I3k3Fed/s16/close.png") no-repeat scroll 0 0 #ccc;
  border: 0 none;
  display: block;
  font: 14px arial;
  height: 16px;
  position: absolute;
  right: 0;
  text-indent: -1e+7px;
  top: 0;
  width: 16px;
  z-index: 99999;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script src="https://cnmu.googlecode.com/svn/trunk/ColorBox/colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"500px",height:"400px",inline:true, href:"#cnmuligmes"});
}
});
</script>
<div style='display:none;'>
<div id='cnmuligmes' style='width: 450px; height: 350px; overflow: hidden;'>
هنا أكتب  ما  تشاء
</div>
</div>

مدون

الأربعاء، 4 مارس 2015