إضافة غاية في الروعة و الاحترافية اضافة زر ملاحظات مهمة
اضافة زر ملاحظات مهمةبعد الضغط على الزر تظهر صفحة الملاحظات بشكل منبثق
شرح تركيب الاضافة
/* Modal button */
.modal-btn{font-family:'Cairo', sans-serif;letter-spacing:1px; float: left;border:none;outline:none;cursor:pointer;padding:10px 25px;background-color:#ef6633;color:#fff;transition:all .3s}
.modal-btn:hover{background-color:#d25729}
/* Modal Iris-Tips.blogspot.com*/
.modal{background-color:rgba(0,0,0,.65);display:none;overflow:auto;position:fixed;z-index:1000;top:0;left:0;width:100%;height:100%}
/* Modal Content */
.modal-content{position:relative;top:0;width:600px;margin:0 auto;background-color:#e5f361;//background-color:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.modal-animated-in{animation:totop-in .3s ease}
.modal-animated-out{animation:totop-out .3s ease forwards}
.modal-header{background-color:#111;width:86%;height:60px;line-height:60px;padding-right:84px}
.modal-content .close{position:absolute;right:0;top:0;background-color:#222;width:60px;height:60px;color:#fff;line-height:60px;text-align:center;cursor:pointer;transition:all .3s}
.modal-content .close:hover{background-color:#fff;color:#222}
/* Modal Body */
.modal-body{padding:0 20px}
.modal-body ul{margin:0;padding:0;list-style:none}
.modal-body ul li{position:relative;display:block;margin-left:20px;color:#555}
.modal-body ul li::before{position:absolute;content:'\f00c';color:#5cc560;left:-20px;top:10px;display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased}
/* Modal Footer */
.modal-footer{background-color:#111;width:96%;height:60px;line-height:60px;padding-right: 24px;padding-left:0px}
.modal-header h3,.modal-footer h3{color:#fff}
/* Keyframes */
@keyframes totop-in{0%{top:600px;opacity:0}100%{top:0;opacity:1}}
@keyframes totop-out{0%{top:0;opacity:1}100%{top:-100%;opacity:0}}
ثم نبحث عن </body> و نضيف الكود التالي فوقه
<script type='text/javascript'>
$(function() {
// Vars
var modBtn = $('#modBtn'),
modal = $('#modal'),
close = modal.find('.close'),
modContent = modal.find('.modal-content');
// open modal when click on open modal button
modBtn.on('click', function() {
modal.css('display', 'block');
modContent.removeClass('modal-animated-out').addClass('modal-animated-in');
});
// close modal when click on close button or somewhere out the modal content
$(document).on('click', function(e) {
var target = $(e.target);
if(target.is(modal) || target.is(close)) {
modContent.removeClass('modal-animated-in').addClass('modal-animated-out').delay(300).queue(function(next) {
modal.css('display', 'none');
next();
});
}
});
});
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
الان ناتي لتركيب الزر يمكنك اختيار مكان مناسب مثلا فوق رسائل المدونة الالكترونية
<!-- Modal button -->
<button id="modBtn" class="modal-btn"> ملاحظة مهمة</button>
</div>
<!-- Modal -->
<div id="modal" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h3 class="header-title">ملاحــظة مهمــة</h3>
<div class="close fa fa-close"></div>
</div>
<!-- Modal Body -->
<div class="modal-body">
<h3>أهلا بكم زوار و متابعي مدونة هلا تك</h3>
<p>نظرا لبعض الأمور التقنية قد تلاقي بعض المشاكل</p>
<p>سنحاول بقدر المستطال و السرعة التوصل للحل.</p>
<ul>
<li>يمكنك تحديث الصفحة .</li>
<li>يمكنك الانتظار عدة ايام.</li>
<li>يمكنك الاتصال بنا.</li>
<li>يمكنك مراسلتنا.</li>
</ul>
<p>و نرجوا من حضراتكم الصبر لحل المشكلة ثق تماما نحن هنا لخدمتكم و لكم منا كل الشكر و التقدير و الأحترام .</p>
</div>
<div class="modal-footer">
<h3>مدونــة هلا تــك </h3>
</div>
</div>
التعديلات
يمكنك التعديل على النص مثلما تريد
و ثم قم بالحفظ و مبروك عليك الاضافة
شكرًا لوقتكم واهتمامكم بقراءة موضوع تركيب زر ملاحظات مهمة لقوالب البلوجر. إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل كل ما هو جديد.