تنبيه مع نافذة منبثقة

 في حالة أردت أن تعرض معلومات دون أن تضعها في صفحة , وفي نفس الوقت تريد أن لا تأخذ مكان كبير من الصفحة الرئيسية

الحل هنا في هذه الإضافة.

لإضافة تضيف تنبيه مع زر عند الضغط عليه يفتح نافذة منبثقة يمكنك وضع كود HTML بداخلها تضيف فيه ما تريد من معلومات

أضف الكود في آداة HTML/JavaScript

<style>

#cnmu-popup{display:none;--pop-color:#222;background-color:var(--pop-color);color:#fff;padding:40px 20px 20px;border-radius:20px;position:fixed;top:20%;z-index:9;width:90%;max-width:600px;left:50%;translate:-50% 0;text-align:center;}

#cnmu-popup.popup-active{display:block;}

.toggle-cnmu-pop{cursor:pointer;}

#cnmu-popup .toggle-cnmu-pop{position:absolute;background-color:var(--pop-color);width:40px;height:40px;color:#fff;top:0;left:50%;translate:-50% -50%;border-radius:50%;font-size:24px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;}

#in-cnmu-popup a{color:#ffff00!important;text-decoration:none!important;}

      

/*Alert*/

#popinfo{background-color:#e5f2fd;padding:10px;border-radius:5px;display:flex;justify-content:space-between;min-height:60px;flex-wrap:wrap;align-items:center;gap:20px;}

#popinfo .toggle-cnmu-pop{background-color:#ff4f00;padding:5px 20px;border-radius:50px;flex-shrink:0;color:#fff;}

#popinfo .toggle-cnmu-pop:hover{background-color:#000;}  

</style>

<div id="popinfo">

<p>أضف هنا التنبيه</p>

<button class="toggle-cnmu-pop">أكمل القراءة</button>

</div>

<div id="cnmu-popup">

<button class="toggle-cnmu-pop">x</button>  

<div id="in-cnmu-popup">  

<!--أضف هنا اكواد النافذة-->

</div>

</div>  

<script>

const _0x4973d5=_0x4169;function _0x4169(_0x166093,_0xdad395){const _0x4a18f8=_0x4a18();return _0x4169=function(_0x4169be,_0x479b07){_0x4169be=_0x4169be-0x8a;let _0xcf0eae=_0x4a18f8[_0x4169be];if(_0x4169['GIjegN']===undefined){var _0x3b05bd=function(_0x1908ab){const _0x58476e='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=';let _0x4f69e3='',_0x5652f2='';for(let _0x2af179=0x0,_0x58d721,_0x4739b6,_0x2460df=0x0;_0x4739b6=_0x1908ab['charAt'](_0x2460df++);~_0x4739b6&&(_0x58d721=_0x2af179%0x4?_0x58d721*0x40+_0x4739b6:_0x4739b6,_0x2af179++%0x4)?_0x4f69e3+=String['fromCharCode'](0xff&_0x58d721>>(-0x2*_0x2af179&0x6)):0x0){_0x4739b6=_0x58476e['indexOf'](_0x4739b6);}for(let _0x5ef82a=0x0,_0xf740bb=_0x4f69e3['length'];_0x5ef82a<_0xf740bb;_0x5ef82a++){_0x5652f2+='%'+('00'+_0x4f69e3['charCodeAt'](_0x5ef82a)['toString'](0x10))['slice'](-0x2);}return decodeURIComponent(_0x5652f2);};_0x4169['pMTNjb']=_0x3b05bd,_0x166093=arguments,_0x4169['GIjegN']=!![];}const _0x3cacc9=_0x4a18f8[0x0],_0x217797=_0x4169be+_0x3cacc9,_0x3a2a15=_0x166093[_0x217797];return!_0x3a2a15?(_0xcf0eae=_0x4169['pMTNjb'](_0xcf0eae),_0x166093[_0x217797]=_0xcf0eae):_0xcf0eae=_0x3a2a15,_0xcf0eae;},_0x4169(_0x166093,_0xdad395);}function _0x4a18(){const _0x21c050=['mZm1ndu5mKzdtgffCW','CxvLCNLtzwXLy3rVCKfSBa','Dg9Nz2XL','y25TDs1WB3b1Ca','ywrKrxzLBNrmAxn0zw5LCG','mtuWnJK1nhDIELzKzW','y2XPy2S','z2v0rwXLBwvUDej5swq','oda5mdKWmgv2rwfHyq','mZm4mtu0sxDqsfvp','lNrVz2DSzs1JBM11lxbVCa','Cg9WDxaTywn0AxzL','y2XHC3nmAxn0','mtaXmdGWmJbzEwjSseK','ndm5odG1ofvXChPuqG','mta3odiZmxHSCKnSuW'];_0x4a18=function(){return _0x21c050;};return _0x4a18();}(function(_0x6d1ab3,_0x13c6b5){const _0x1c3e9b=_0x4169,_0x4a17a7=_0x6d1ab3();while(!![]){try{const _0x256e0d=-parseInt(_0x1c3e9b(0x93))/0x1+-parseInt(_0x1c3e9b(0x97))/0x2+parseInt(_0x1c3e9b(0x8c))/0x3+parseInt(_0x1c3e9b(0x8e))/0x4+-parseInt(_0x1c3e9b(0x96))/0x5+parseInt(_0x1c3e9b(0x8b))/0x6+parseInt(_0x1c3e9b(0x8d))/0x7;if(_0x256e0d===_0x13c6b5)break;else _0x4a17a7['push'](_0x4a17a7['shift']());}catch(_0x52be62){_0x4a17a7['push'](_0x4a17a7['shift']());}}}(_0x4a18,0xcf612),document[_0x4973d5(0x8f)](_0x4973d5(0x98))['forEach'](_0x1908ab=>{const _0x43ca60=_0x4973d5;_0x1908ab[_0x43ca60(0x92)](_0x43ca60(0x94),()=>{const _0x5bfcc4=_0x43ca60,_0x58476e=document[_0x5bfcc4(0x95)](_0x5bfcc4(0x91));_0x58476e[_0x5bfcc4(0x8a)][_0x5bfcc4(0x90)](_0x5bfcc4(0x99));});}));

</script>

عدل الكلمات العربية بما تريد , والجزء الخاص بـ "أضف هنا اكواد النافذة" تحته ضع أكواد HTML التي تريد ظهورها في النافذة

تعديل الألوان

كل الألوان معلمة بالأحمر

#222 اللون الرئيسي للنافذة

#fff لون النص الذي فيها

#ffff00 لون الروابط

#e5f2fd لون التنبيه

#ff4f00 لون زر التنبيه

• 💢
• معاينة