Byt ut JavaScript-varningsboxar med detta responsiva alternativ

JavaScript alert popup-fönster är avskyvärda av ganska mycket alla. De tvingar din uppmärksamhet och övertar webbläsaren, så du måste stänga dem innan du kan interagera med sidan.

I modern tid kan vi gör det bättre än JavaScript-varningsrutor. SweetAlert2 är förmodligen den bästa lösningen.

Det är en JavaScript-drivet popup-skript det är tänkt att vara fullt mottaglig och stödja tillgängligheten för alla användare.

Naturligtvis är det också öppet och fritt tillgänglig på GitHub om du vill gräva i koden.

Men den verkliga skatten är demoen på den största SweetAlert-webbsidan. Det erbjuder en direkt jämförelse mellan den ursprungliga JavaScript-varningsrutan och SweetAlert2-meddelandet.

Vad är roligt är kodproblemen inte verkar vara så mycket av en skillnad. Du kan kör SweetAlert2 med en rad kod precis som en typisk JavaScript-varning, även om den linjen kan vara längre jämfört.

Med SweetAlert, du ha mer kontroll över popup-rutans stil, animeringen, knappfärgerna och textstilarna. Du kan till och med bädda in bilder eller videoklipp in i varningsrutan.

Den absolut bästa funktionen är dock att SweetAlert2 gör inte ta över hela webbläsaren. Om du kör en SweetAlert2 popup kommer det Visa bara på den ena fliken, så även om användaren bläddrar på en annan webbplats kommer de inte att vara kraftfullt inriktad på din flik bara för att en varning dyker upp.

Detta i slutändan ökar användarengagemanget eftersom människor inte avvärjas på grund av skuggiga UX-metoder.

Du kan Ställ in automatisk stängningstider, bekräfta / avvisa knappar, och även anpassa animeringen använda bibliotek från tredje part som Animate.css.

Om det finns ett skript som du ska använda istället för den typiska JavaScript-varningen måste det vara SweetAlert2. Den här saken är helt gratis, öppen källa, och erbjuder ett gäng anpassade alternativ det kommer att få varje webbutvecklare att grinning från öra till öra.

Kolla in huvudwebbplatsen för att lära dig mer och se några levande exempel. Du kan också bläddra i GitHub repo om du vill se filerna och kolla in utgivningsloggar.