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

إضافة رسالة منبثقة بتقنية 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/AVvXsEjw1T7-N-ZrolRoWXAMBO90DqZLE-G7L8ICI7zC_Ty-OJQgZXAOP2qjhn9wnnpZYUg1a9VO3aova73LBW23eblEu105zF_6qUDdEjzqh0oljTbrFYpPHlxQbwnoeFuWIRMAy-rrWNnKEytX/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> 

عنوان التدوينة: إضافة رسالة منبثقة بتقنية lightbox
تقييم : 10 من 10 مرتكز على 24 تقييم.
المدير |زياد الزعبي

عدد المشاهدات :

Zied Zaabi

زياد الزعبي : من تونس, اهتمامي وحبي للتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحت وواضبت على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,زياد ويب

• غرد
• مشاركة
• إضافة
مزيد

بضغطة زر تشارك الفائدة وتدعم المدونة

صندوق التدوينة

رابط مباشر :

كود للمنتديات :

HTML كود :