في تدوينة تخص إضافات بلوجر طرحت لكم إضافة خاصية إتصل بنا منزلقة طبعا وكما ذكرت في السابق أهمية نموذج الإتصال في أي موقع كان أو حتى في الحياة اليومية وهذه التدوينة تشمل أيضا إضافة إتصل بنا لكن هذه المرة بشكل أخر ومغاير بالكامل عن الإضافة السابقة من حيث الشكل والتأثير الذي هو عبارة عن صندوق ينفتح لتصبح الخلفية سوداء ونموذج الإتصال واضح ويسمى بـ LightBox للمعاينة إذهب لآخر الصفحة

#contacts-forms{width:100%;margin-bottom:10px} #widget-contact{ position: fixed; top: 15%; left: 50%; width: 300px; height: auto; z-index: 1000; display: none; margin: 0 0 0 -200px; background-color: #fff; border: 4px solid #E74C3C;} #widget-contact h3.juduls{background: #444; color: #fff; position: relative; margin: 0; padding: 15px; text-transform: uppercase; text-align: center; font-size: 11px;text-shadow: 0px -2px 0px rgba(0, 0, 0, 0.15);} #widget-contact h3.juduls:hover {background: #D13F30;} #widget-contact h3.juduls a{position:absolute;left:15px;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;top: 1px;font-weight: bold;} #ContactForm1 h2{display:none} #area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none} #ContactForm1_contact-form-email-message{ width: 110%; background: #FAFAFA; outline: none; border: 1px solid #C7C7C7; overflow: hidden; height: 150px; color: #444; margin: 0 10px 10px; padding: 7px; max-width: 1100px;} #ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;color:#fff;font-family: Electrolize,ge_ss_tvbold;} #ContactForm1_contact-form-submit:hover{background:#C0392B} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px;color: #444;} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width: 110%; background: #FAFAFA; color: #444; outline: none; border: 1px solid #C7C7C7; margin: 0 10px 10px; padding: 10px; max-width: 1100px;} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff} .contact-form-widget p{margin:0} .contact-form-widget{ padding: 5px; font: normal 13px Droid Arabic Naskh; line-height: 2em; text-align: right; font-weight: 600; color: #676363;} .buka-contact { position: relative; z-index: 2; display: inline-block; font-size: 12px; top: 10px; font-weight: normal; padding: 0 12px; color: #fff; float: left; height: 25px; line-height: 27px; background-color: #E74C3C; font-family: Droid Arabic Naskh; cursor: pointer; right: -15px; } .buka-contact:before{ content: ""; border: 8px solid #E74C3C; border-left-color: rgba(0, 0, 0, 0); border-top-color: rgba(0, 0, 0, 0); position: absolute; left: -16px; top: -0px; } 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
$(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})});
</script>

<div id='contacts-forms'>
<div id='widget-contact'>
<h3 class='juduls'>اتصل بنا<a href='#' class='close' title='إغلاق'>&#215;</a></h3>
<b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/>
</div>
<div id='area-overlay'></div>
<button class='buka-contact'>اتصل بنا</button>
</div>