Skip to content

Instantly share code, notes, and snippets.

@arempe93

arempe93/alert.html

Last active September 19, 2015 04:57
Show Gist options
  • Save arempe93/fed42e4e16e17c8dd8f1 to your computer and use it in GitHub Desktop.
Save arempe93/fed42e4e16e17c8dd8f1 to your computer and use it in GitHub Desktop.
Download ZIP
Alert concept
Raw
alert.html
<!DOCTYPE html>
<html>
<head>
<title>Alert Testing</title>
<link href="alert.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<style type="text/css">
.toast {
opacity: 0;
position: fixed;
top: 100px;
right: -300px;
width: 300px;
padding: 15px;
border: 1px solid transparent;
border-radius: 4px;
background-color: #fff;
box-shadow: -1px 4px 10px rgba(0, 0, 0, 0.2);
transition: all 1.5s ease-in-out;
}
.toast > h3 {
margin-top: 0px;
font-weight: 700;
}
.toast > p {
margin: 0px;
color: #333;
}
.toast > .close {
font-size: 18px;
}
.toast.active {
opacity: 1;
right: 20px;
}
.toast.error {
border-color: #efefef;
color: #b84d45;
}
</style>
</head>
<body>
<div class="container">
<h1>Some content is on the page</h1>
<p>
<button type="button" onclick="$('#alert').toggleClass('active');" class="btn btn-default">
Show / Hide Alert
</button>
</p>
<p>
Lorem ipsum dolor sit amet, et eos ullum hendrerit. Sed ne vitae delectus menandri, ne mel recusabo delicata, epicurei eleifend omittantur per ad. Detraxit consulatu eu qui. Qui exerci omittantur eloquentiam no. Fabellas indoctum repudiare ex vis, mucius scriptorem ex quo, ius melius interesset ne.
</p>
<p>
Eam cu erant fastidii adipisci, ius luptatum accusamus splendide ex, graeco hendrerit eos ne. Mazim delectus ad vix, congue voluptatum at duo, alienum minimum facilisis sit eu. In nec nulla tibique detraxit, ut agam temporibus vix. In vix laudem graeci diceret, ea sumo exerci cotidieque sed. Mea dissentias dissentiet cu, erat nominati at nam.
</p>
<p>
Eum postulant repudiare pertinacia ei, mandamus voluptaria posidonium has ut, quo te dico dolor sanctus. Duo ne oportere facilisis interpretaris, veri illum et est. Reque fastidii no sea, libris melius apeirian et vis. No scaevola periculis definitiones cum, congue soleat sit ad, eam ei purto laboramus. Et solum constituto suscipiantur eum, ea vis graeco vidisse consetetur.
</p>
<p>
Consetetur adversarium cu est. Ei dolorem disputando duo, ea cum sumo doctus numquam. Duo ut facilisis rationibus neglegentur, nihil electram corrumpit mea eu. Vis meis justo veritus an. Mandamus dissentias at nec.
</p>
<p>
Sit ea vero accusata. Habeo sensibus quo et, te semper volutpat tincidunt nam, cum in enim mollis vocent. Summo dictas ad nec, sea ignota tamquam adipiscing no. Diam modus expetenda per id, ei timeam facilis ius, vero viderer ut eam.
</p>
<p>
Atqui disputando eu vis, error adipiscing eam cu. Ceteros partiendo consequuntur cum ex, at altera labores vix, ea nec inermis adipisci evertitur. Ei cum dicat accusamus. Mel esse facilisi te, cum nihil graece vituperatoribus at.
</p>
<p>
Ne harum contentiones nec. Albucius verterem democritum ea sea. Quando melius maiestatis sed at. Vim ad dolore verear laboramus.
</p>
<p>
Ne omnis accusam pri. Zril quaeque qui ne, has iriure fabulas quaestio in. Te iisque recusabo per, an aliquam delenit has. At sit iuvaret utroque, eu est tale impetus mentitum, vim te amet debet. Ei nec vidit semper maiorum, quo habemus fabellas democritum id.
</p>
<p>
Duo cu prima ancillae. In intellegebat vituperatoribus duo, nemore malorum accumsan his ut, putant salutatus vel id. Qui te quando torquatos, cum ei utroque adversarium. Ut quo clita molestie.
</p>
<p>
Ex erant iriure detracto nec, nec id vide nonumy facete, vis ex facete dolorem. Dicat fastidii consulatu no qui. Cu aliquid bonorum vim, ei alienum molestie cotidieque quo. Vim vidisse apeirian elaboraret ei, te eum modus platonem, appareat maluisset cu eos.
</p>
<p>
Lorem ipsum dolor sit amet, et eos ullum hendrerit. Sed ne vitae delectus menandri, ne mel recusabo delicata, epicurei eleifend omittantur per ad. Detraxit consulatu eu qui. Qui exerci omittantur eloquentiam no. Fabellas indoctum repudiare ex vis, mucius scriptorem ex quo, ius melius interesset ne.
</p>
<p>
Eam cu erant fastidii adipisci, ius luptatum accusamus splendide ex, graeco hendrerit eos ne. Mazim delectus ad vix, congue voluptatum at duo, alienum minimum facilisis sit eu. In nec nulla tibique detraxit, ut agam temporibus vix. In vix laudem graeci diceret, ea sumo exerci cotidieque sed. Mea dissentias dissentiet cu, erat nominati at nam.
</p>
<p>
Eum postulant repudiare pertinacia ei, mandamus voluptaria posidonium has ut, quo te dico dolor sanctus. Duo ne oportere facilisis interpretaris, veri illum et est. Reque fastidii no sea, libris melius apeirian et vis. No scaevola periculis definitiones cum, congue soleat sit ad, eam ei purto laboramus. Et solum constituto suscipiantur eum, ea vis graeco vidisse consetetur.
</p>
<p>
Consetetur adversarium cu est. Ei dolorem disputando duo, ea cum sumo doctus numquam. Duo ut facilisis rationibus neglegentur, nihil electram corrumpit mea eu. Vis meis justo veritus an. Mandamus dissentias at nec.
</p>
<p>
Sit ea vero accusata. Habeo sensibus quo et, te semper volutpat tincidunt nam, cum in enim mollis vocent. Summo dictas ad nec, sea ignota tamquam adipiscing no. Diam modus expetenda per id, ei timeam facilis ius, vero viderer ut eam.
</p>
<p>
Atqui disputando eu vis, error adipiscing eam cu. Ceteros partiendo consequuntur cum ex, at altera labores vix, ea nec inermis adipisci evertitur. Ei cum dicat accusamus. Mel esse facilisi te, cum nihil graece vituperatoribus at.
</p>
<p>
Ne harum contentiones nec. Albucius verterem democritum ea sea. Quando melius maiestatis sed at. Vim ad dolore verear laboramus.
</p>
<p>
Ne omnis accusam pri. Zril quaeque qui ne, has iriure fabulas quaestio in. Te iisque recusabo per, an aliquam delenit has. At sit iuvaret utroque, eu est tale impetus mentitum, vim te amet debet. Ei nec vidit semper maiorum, quo habemus fabellas democritum id.
</p>
<p>
Duo cu prima ancillae. In intellegebat vituperatoribus duo, nemore malorum accumsan his ut, putant salutatus vel id. Qui te quando torquatos, cum ei utroque adversarium. Ut quo clita molestie.
</p>
<p>
Ex erant iriure detracto nec, nec id vide nonumy facete, vis ex facete dolorem. Dicat fastidii consulatu no qui. Cu aliquid bonorum vim, ei alienum molestie cotidieque quo. Vim vidisse apeirian elaboraret ei, te eum modus platonem, appareat maluisset cu eos.
</p>
<p>
Lorem ipsum dolor sit amet, et eos ullum hendrerit. Sed ne vitae delectus menandri, ne mel recusabo delicata, epicurei eleifend omittantur per ad. Detraxit consulatu eu qui. Qui exerci omittantur eloquentiam no. Fabellas indoctum repudiare ex vis, mucius scriptorem ex quo, ius melius interesset ne.
</p>
<p>
Eam cu erant fastidii adipisci, ius luptatum accusamus splendide ex, graeco hendrerit eos ne. Mazim delectus ad vix, congue voluptatum at duo, alienum minimum facilisis sit eu. In nec nulla tibique detraxit, ut agam temporibus vix. In vix laudem graeci diceret, ea sumo exerci cotidieque sed. Mea dissentias dissentiet cu, erat nominati at nam.
</p>
<p>
Eum postulant repudiare pertinacia ei, mandamus voluptaria posidonium has ut, quo te dico dolor sanctus. Duo ne oportere facilisis interpretaris, veri illum et est. Reque fastidii no sea, libris melius apeirian et vis. No scaevola periculis definitiones cum, congue soleat sit ad, eam ei purto laboramus. Et solum constituto suscipiantur eum, ea vis graeco vidisse consetetur.
</p>
<p>
Consetetur adversarium cu est. Ei dolorem disputando duo, ea cum sumo doctus numquam. Duo ut facilisis rationibus neglegentur, nihil electram corrumpit mea eu. Vis meis justo veritus an. Mandamus dissentias at nec.
</p>
<p>
Sit ea vero accusata. Habeo sensibus quo et, te semper volutpat tincidunt nam, cum in enim mollis vocent. Summo dictas ad nec, sea ignota tamquam adipiscing no. Diam modus expetenda per id, ei timeam facilis ius, vero viderer ut eam.
</p>
<p>
Atqui disputando eu vis, error adipiscing eam cu. Ceteros partiendo consequuntur cum ex, at altera labores vix, ea nec inermis adipisci evertitur. Ei cum dicat accusamus. Mel esse facilisi te, cum nihil graece vituperatoribus at.
</p>
<p>
Ne harum contentiones nec. Albucius verterem democritum ea sea. Quando melius maiestatis sed at. Vim ad dolore verear laboramus.
</p>
<p>
Ne omnis accusam pri. Zril quaeque qui ne, has iriure fabulas quaestio in. Te iisque recusabo per, an aliquam delenit has. At sit iuvaret utroque, eu est tale impetus mentitum, vim te amet debet. Ei nec vidit semper maiorum, quo habemus fabellas democritum id.
</p>
<p>
Duo cu prima ancillae. In intellegebat vituperatoribus duo, nemore malorum accumsan his ut, putant salutatus vel id. Qui te quando torquatos, cum ei utroque adversarium. Ut quo clita molestie.
</p>
<p>
Ex erant iriure detracto nec, nec id vide nonumy facete, vis ex facete dolorem. Dicat fastidii consulatu no qui. Cu aliquid bonorum vim, ei alienum molestie cotidieque quo. Vim vidisse apeirian elaboraret ei, te eum modus platonem, appareat maluisset cu eos.
</p>
<p>
Lorem ipsum dolor sit amet, et eos ullum hendrerit. Sed ne vitae delectus menandri, ne mel recusabo delicata, epicurei eleifend omittantur per ad. Detraxit consulatu eu qui. Qui exerci omittantur eloquentiam no. Fabellas indoctum repudiare ex vis, mucius scriptorem ex quo, ius melius interesset ne.
</p>
<p>
Eam cu erant fastidii adipisci, ius luptatum accusamus splendide ex, graeco hendrerit eos ne. Mazim delectus ad vix, congue voluptatum at duo, alienum minimum facilisis sit eu. In nec nulla tibique detraxit, ut agam temporibus vix. In vix laudem graeci diceret, ea sumo exerci cotidieque sed. Mea dissentias dissentiet cu, erat nominati at nam.
</p>
<p>
Eum postulant repudiare pertinacia ei, mandamus voluptaria posidonium has ut, quo te dico dolor sanctus. Duo ne oportere facilisis interpretaris, veri illum et est. Reque fastidii no sea, libris melius apeirian et vis. No scaevola periculis definitiones cum, congue soleat sit ad, eam ei purto laboramus. Et solum constituto suscipiantur eum, ea vis graeco vidisse consetetur.
</p>
<p>
Consetetur adversarium cu est. Ei dolorem disputando duo, ea cum sumo doctus numquam. Duo ut facilisis rationibus neglegentur, nihil electram corrumpit mea eu. Vis meis justo veritus an. Mandamus dissentias at nec.
</p>
<p>
Sit ea vero accusata. Habeo sensibus quo et, te semper volutpat tincidunt nam, cum in enim mollis vocent. Summo dictas ad nec, sea ignota tamquam adipiscing no. Diam modus expetenda per id, ei timeam facilis ius, vero viderer ut eam.
</p>
<p>
Atqui disputando eu vis, error adipiscing eam cu. Ceteros partiendo consequuntur cum ex, at altera labores vix, ea nec inermis adipisci evertitur. Ei cum dicat accusamus. Mel esse facilisi te, cum nihil graece vituperatoribus at.
</p>
<p>
Ne harum contentiones nec. Albucius verterem democritum ea sea. Quando melius maiestatis sed at. Vim ad dolore verear laboramus.
</p>
<p>
Ne omnis accusam pri. Zril quaeque qui ne, has iriure fabulas quaestio in. Te iisque recusabo per, an aliquam delenit has. At sit iuvaret utroque, eu est tale impetus mentitum, vim te amet debet. Ei nec vidit semper maiorum, quo habemus fabellas democritum id.
</p>
<p>
Duo cu prima ancillae. In intellegebat vituperatoribus duo, nemore malorum accumsan his ut, putant salutatus vel id. Qui te quando torquatos, cum ei utroque adversarium. Ut quo clita molestie.
</p>
<p>
Ex erant iriure detracto nec, nec id vide nonumy facete, vis ex facete dolorem. Dicat fastidii consulatu no qui. Cu aliquid bonorum vim, ei alienum molestie cotidieque quo. Vim vidisse apeirian elaboraret ei, te eum modus platonem, appareat maluisset cu eos.
</p>
<p>
Lorem ipsum dolor sit amet, et eos ullum hendrerit. Sed ne vitae delectus menandri, ne mel recusabo delicata, epicurei eleifend omittantur per ad. Detraxit consulatu eu qui. Qui exerci omittantur eloquentiam no. Fabellas indoctum repudiare ex vis, mucius scriptorem ex quo, ius melius interesset ne.
</p>
<p>
Eam cu erant fastidii adipisci, ius luptatum accusamus splendide ex, graeco hendrerit eos ne. Mazim delectus ad vix, congue voluptatum at duo, alienum minimum facilisis sit eu. In nec nulla tibique detraxit, ut agam temporibus vix. In vix laudem graeci diceret, ea sumo exerci cotidieque sed. Mea dissentias dissentiet cu, erat nominati at nam.
</p>
<p>
Eum postulant repudiare pertinacia ei, mandamus voluptaria posidonium has ut, quo te dico dolor sanctus. Duo ne oportere facilisis interpretaris, veri illum et est. Reque fastidii no sea, libris melius apeirian et vis. No scaevola periculis definitiones cum, congue soleat sit ad, eam ei purto laboramus. Et solum constituto suscipiantur eum, ea vis graeco vidisse consetetur.
</p>
<p>
Consetetur adversarium cu est. Ei dolorem disputando duo, ea cum sumo doctus numquam. Duo ut facilisis rationibus neglegentur, nihil electram corrumpit mea eu. Vis meis justo veritus an. Mandamus dissentias at nec.
</p>
<p>
Sit ea vero accusata. Habeo sensibus quo et, te semper volutpat tincidunt nam, cum in enim mollis vocent. Summo dictas ad nec, sea ignota tamquam adipiscing no. Diam modus expetenda per id, ei timeam facilis ius, vero viderer ut eam.
</p>
<p>
Atqui disputando eu vis, error adipiscing eam cu. Ceteros partiendo consequuntur cum ex, at altera labores vix, ea nec inermis adipisci evertitur. Ei cum dicat accusamus. Mel esse facilisi te, cum nihil graece vituperatoribus at.
</p>
<p>
Ne harum contentiones nec. Albucius verterem democritum ea sea. Quando melius maiestatis sed at. Vim ad dolore verear laboramus.
</p>
<p>
Ne omnis accusam pri. Zril quaeque qui ne, has iriure fabulas quaestio in. Te iisque recusabo per, an aliquam delenit has. At sit iuvaret utroque, eu est tale impetus mentitum, vim te amet debet. Ei nec vidit semper maiorum, quo habemus fabellas democritum id.
</p>
<p>
Duo cu prima ancillae. In intellegebat vituperatoribus duo, nemore malorum accumsan his ut, putant salutatus vel id. Qui te quando torquatos, cum ei utroque adversarium. Ut quo clita molestie.
</p>
<p>
Ex erant iriure detracto nec, nec id vide nonumy facete, vis ex facete dolorem. Dicat fastidii consulatu no qui. Cu aliquid bonorum vim, ei alienum molestie cotidieque quo. Vim vidisse apeirian elaboraret ei, te eum modus platonem, appareat maluisset cu eos.
</p>
</div>
<div id="alert" class="toast error">
<a href="javascript:void(0)" onclick="$('#alert').toggleClass('active');" class="close">
<i class="fa fa-fw fa-times"></i>
</a>
<h3>Error</h3>
<p>Something went wrong</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment