إضافة غاية في الروعة و الاحترافية اضافة زر ملاحظات مهمة
اضافة زر ملاحظات مهمةبعد الضغط على الزر تظهر صفحة الملاحظات بشكل منبثق
شرح تركيب الاضافة
/* 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>
التعديلات
يمكنك التعديل على النص مثلما تريد
و ثم قم بالحفظ و مبروك عليك الاضافة