Hpw to customize alert/RE (js alert) modals

hpl123

Hi all,
Here is a tip on how to customize the alert modals (non extjs/Aware IM). The existing alert modals are the ugly JS default ones and with this fix you can customize the style of the modal (Aware IM still populates the right alert text in the alert). See screenshot below for an example. Note: I have limited JS and Aware IM internals etc. knowledge and I don´t think this messes up anything in your application since the actual Aware IM internals code isn´t changed. What´s changed is only the style of the modal. I don´t know this for sure thought so use at own risk and if anyone more knowledgeable (or support) can take a look at this solution and verify that using it is OK, that would be great and appreciated.

Support, the absolute ideal thought would be to either use extjs/Aware IM modals INSTEAD of the existong plan js ones OR integrate an external alert package/library like for example Sweetalert (http://tristanedwards.me/sweetalert).

Source:
http://stackoverflow.com/questions/7853130/how-to-change-the-style-of-alert-box.

Screenshot:

Instructions:
In startup.html (inside head tag) add the following css and js (this should ideally be referenced to in separate files that you link to from your startup.html):

CSS (if you add this in your head tag, the css should be inside <style> tags, if you use an external file it shouldn´t be inside <style> tags). You can customize the CSS how ever you like:

<style>
 #modalContainer {
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:9999999;
    background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
    position:relative;
    width:300px;
    min-height:100px;
    margin-top:50px;
    border:1px solid #666;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:20px 30px;
}

#modalContainer > #alertBox {
    position:fixed;
}

#alertBox h1 {
    margin:0;
    font:bold 0.9em verdana,arial;
    background-color:#3073BB;
    color:#FFF;
    border-bottom:1px solid #000;
    padding:2px 0 2px 5px;
}

#alertBox p {
    font:0.7em verdana,arial;
    height:50px;
    padding-left:5px;
    margin-left:55px;
}

#alertBox #closeBtn {
    display:block;
    position:relative;
    margin:5px auto;
    padding:7px;
    border:0 none;
    width:70px;
    font:0.7em verdana,arial;
    text-transform:uppercase;
    text-align:center;
    color:#FFF;
    background-color:#357EBD;
    border-radius: 3px;
    text-decoration:none;
}

/* unrelated styles */

#mContainer {
    position:relative;
    width:600px;
    margin:auto;
    padding:5px;
    border-top:2px solid #000;
    border-bottom:2px solid #000;
    font:0.7em verdana,arial;
}

h1,h2 {
    margin:0;
    padding:4px;
    font:bold 1.5em verdana;
    border-bottom:1px solid #000;
}

code {
    font-size:1.2em;
    color:#069;
}

#credits {
    position:relative;
    margin:25px auto 0px auto;
    width:350px;
    font:0.7em verdana;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    height:90px;
    padding-top:4px;
}

#credits img {
    float:left;
    margin:5px 10px 5px 0px;
    border:1px solid #000000;
    width:80px;
    height:79px;
}

.important {
    background-color:#F5FCC8;
    padding:2px;
}

code span {
    color:green;
}
</style>

JS (if you add this in your head tag, the js should be inside <script> tags, if you use an external file it shouldn´t be inside <script> tags). Another thing, the ALERT_TITLE and ALERT_BUTTON_TEXT can be changed to whatever you want but make sure you choose a neutral term because these alerts are used extensively throughout applications and contexts:

<script>
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";

if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

function createCustomAlert(txt) {
    d = document;

if(d.getElementById("modalContainer")) return;

mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
mObj.id = "modalContainer";
mObj.style.height = d.documentElement.scrollHeight + "px";

alertObj = mObj.appendChild(d.createElement("div"));
alertObj.id = "alertBox";
if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";
alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
alertObj.style.visiblity="visible";

h1 = alertObj.appendChild(d.createElement("h1"));
h1.appendChild(d.createTextNode(ALERT_TITLE));

msg = alertObj.appendChild(d.createElement("p"));
//msg.appendChild(d.createTextNode(txt));
msg.innerHTML = txt;

btn = alertObj.appendChild(d.createElement("a"));
btn.id = "closeBtn";
btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
btn.href = "#";
btn.focus();
btn.onclick = function() { removeCustomAlert();return false; }

alertObj.style.display = "block";

}

function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
</script>

hpl123

Here is a Work In Progress attempt to use the Sweetalert CSS with the previously posted solution. It works as is but might need some small adjustments. Also the CSS is messy and just something I have thrown together (mix of Sweetalert CSS and original CSS). If you clean it up and manage to do some other cool stuff, please share your findings. I THINK it´s possible to basically mimic the full Sweetalert alert but requires some work.

To use it, use this CSS with the previous guide.

Screenshot:

CSS:

<style>
 #modalContainer {
  background-color: #000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  background-color: rgba(0, 0, 0, .4);
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
}
#alertBox{
  background-color: #fff;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 478px;
  padding: 57px;
  border-radius: 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 40%;
  overflow: hidden;
  z-index: 99999;
}
@media all and (max-width: 540px){
  #alertBox{
    width: auto;
    margin-left: 0;
    margin-right: 0;
    left: 15px;
    right: 15px;
  }
}
#alertBox h1{
  color: #575757;
  font-size: 30px;
  text-align: center;
  font-weight: 600;
  text-transform: none;
  position: relative;

  padding: 0;
  line-height: 40px;
  display: block;
}
#alertBox p{
  color: #797979;
  font-size: 16px;
  font-weight: 300;
  position: relative;
  text-align: inherit;
  float: none;
  margin: 0;
  padding: 5px 0 30px 0;
  line-height: normal;
}
#alertBox #closeBtn {
  background-color: #AEDEF4;
  color: #fff;
  border: none;
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  -webkit-border-radius: 4px;
  border-radius: 5px;
  padding: 10px 32px;
  margin-bottom:-25px;
  cursor: pointer;
}
#alertBox #closeBtn:focus{
  outline: 0;
  box-shadow: 0 0 2px rgba(128, 179, 235, .5), inset 0 0 0 1px rgba(0, 0, 0, .05);
}
#alertBox #closeBtn:hover{
  background-color: #a1d9f2;
}
#alertBox #closeBtn:active{
  background-color: #81ccee;
}
#alertBox #closeBtn.cancel{
  background-color: #D0D0D0;
}
#alertBox #closeBtn.cancel:hover{
  background-color: #c8c8c8;
}
#alertBox #closeBtn.cancel:active{
  background-color: #b6b6b6;
}
#alertBox #closeBtn.cancel:focus{
  box-shadow:rgba(197,205,211,.8-) 0 0 2px,rgba(0,0,0,.0470588-) 0 0 0 1px inset!important;
}
#alertBox #closeBtn::-moz-focus-inner{
  border: 0;
}
#alertBox[data-has-cancel-#closeBtn=false] #closeBtn{
  box-shadow:none!important;
}
#alertBox[data-has-confirm-#closeBtn=false][data-has-cancel-#closeBtn=false]{
  padding-bottom: 40px;
}
#alertBox .sa-icon{
  width: 80px;
  height: 80px;
  border: 4px solid gray;
  -webkit-border-radius: 40px;
  border-radius: 50%;
  margin: 20px auto;
  padding: 0;
  position: relative;
  box-sizing: content-box;
}
#alertBox .sa-icon.sa-error{
  border-color: #F27474;
}
#alertBox .sa-icon.sa-error .sa-x-mark{
  position: relative;
  display: block;
}
#alertBox .sa-icon.sa-error .sa-line{
  position: absolute;
  height: 5px;
  width: 47px;
  background-color: #F27474;
  display: block;
  top: 3px;
  border-radius: 2px;
}
#alertBox .sa-icon.sa-error .sa-line.sa-left{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 17px;
}
#alertBox .sa-icon.sa-error .sa-line.sa-right{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 16px;
}
#alertBox .sa-icon.sa-warning{
  border-color: #F8BB86;
}
#alertBox .sa-icon.sa-warning .sa-body{
  position: absolute;
  width: 5px;
  height: 47px;
  left: 50%;
  top: 10px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-left: -2px;
  background-color: #F8BB86;
}
#alertBox .sa-icon.sa-warning .sa-dot{
  position: absolute;
  width: 7px;
  height: 7px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-left: -3px;
  left: 50%;
  bottom: 10px;
  background-color: #F8BB86;
}
#alertBox .sa-icon.sa-info{
  border-color: #C9DAE1;
}
#alertBox .sa-icon.sa-info::before{
  content: "";
  position: absolute;
  width: 5px;
  height: 29px;
  left: 50%;
  bottom: 17px;
  border-radius: 2px;
  margin-left: -2px;
  background-color: #C9DAE1;
}
#alertBox .sa-icon.sa-info::after{
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-left: -3px;
  top: 19px;
  background-color: #C9DAE1;
}
#alertBox .sa-icon.sa-success{
  border-color: #A5DC86;
}
#alertBox .sa-icon.sa-success::after,#alertBox .sa-icon.sa-success::before{
  content: '';
  position: absolute;
  width: 60px;
  height: 120px;
  background: #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#alertBox .sa-icon.sa-success::before{
  -webkit-border-radius: 120px 0 0 120px;
  border-radius: 120px 0 0 120px;
  top: -7px;
  left: -33px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
}
#alertBox .sa-icon.sa-success::after{
  -webkit-border-radius: 0 120px 120px 0;
  border-radius: 0 120px 120px 0;
  top: -11px;
  left: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 60px;
  transform-origin: 0 60px;
}
#alertBox .sa-icon.sa-success .sa-placeholder{
  width: 80px;
  height: 80px;
  border: 4px solid rgba(165, 220, 134, .2);
  -webkit-border-radius: 40px;
  border-radius: 50%;
  box-sizing: content-box;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 2;
}
#alertBox .sa-icon.sa-success .sa-fix{
  width: 5px;
  height: 90px;
  background-color: #fff;
  position: absolute;
  left: 28px;
  top: 8px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#alertBox .sa-icon.sa-success .sa-line{
  height: 5px;
  background-color: #A5DC86;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
}
#alertBox .sa-icon.sa-success .sa-line.sa-tip{
  width: 25px;
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#alertBox .sa-icon.sa-success .sa-line.sa-long{
  width: 47px;
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#alertBox .sa-icon.sa-custom{
  background-size: contain;
  border-radius: 0;
  border: none;
  background-position: center center;
  background-repeat: no-repeat;
}
@-webkit-keyframes showSweetAlert{
  0%{
    transform: scale(.7);
    -webkit-transform: scale(.7);
  }
  45%{
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }
  80%{
    transform: scale(.95);
    -webkit-tranform: scale(.95);
  }
  100%{
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes showSweetAlert{
  0%{
    transform: scale(.7);
    -webkit-transform: scale(.7);
  }
  45%{
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
  }
  80%{
    transform: scale(.95);
    -webkit-tranform: scale(.95);
  }
  100%{
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes hideSweetAlert{
  0%{
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  100%{
    transform: scale(.5);
    -webkit-transform: scale(.5);
  }
}
@keyframes hideSweetAlert{
  0%{
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  100%{
    transform: scale(.5);
    -webkit-transform: scale(.5);
  }
}
.showSweetAlert{
  -webkit-animation: showSweetAlert .3s;
  animation: showSweetAlert .3s;
}
.showSweetAlert[data-animation=none]{
  -webkit-animation: none;
  animation: none;
}
.hideSweetAlert{
  -webkit-animation: hideSweetAlert .2s;
  animation: hideSweetAlert .2s;
}
.hideSweetAlert[data-animation=none]{
  -webkit-animation: none;
  animation: none;
}
@-webkit-keyframes animateSuccessTip{
  0%, 54%{
    width: 0;
    left: 1px;
    top: 19px;
  }
  70%{
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84%{
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100%{
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@keyframes animateSuccessTip{
  0%, 54%{
    width: 0;
    left: 1px;
    top: 19px;
  }
  70%{
    width: 50px;
    left: -8px;
    top: 37px;
  }
  84%{
    width: 17px;
    left: 21px;
    top: 48px;
  }
  100%{
    width: 25px;
    left: 14px;
    top: 45px;
  }
}
@-webkit-keyframes animateSuccessLong{
  0%, 65%{
    width: 0;
    right: 46px;
    top: 54px;
  }
  84%{
    width: 55px;
    right: 0;
    top: 35px;
  }
  100%{
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@keyframes animateSuccessLong{
  0%, 65%{
    width: 0;
    right: 46px;
    top: 54px;
  }
  84%{
    width: 55px;
    right: 0;
    top: 35px;
  }
  100%{
    width: 47px;
    right: 8px;
    top: 38px;
  }
}
@-webkit-keyframes rotatePlaceholder{
  0%, 5%{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  100%, 12%{
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
}
@keyframes rotatePlaceholder{
  0%, 5%{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  100%, 12%{
    transform: rotate(-405deg);
    -webkit-transform: rotate(-405deg);
  }
}
.animateSuccessTip{
  -webkit-animation: animateSuccessTip .75s;
  animation: animateSuccessTip .75s;
}
.animateSuccessLong{
  -webkit-animation: animateSuccessLong .75s;
  animation: animateSuccessLong .75s;
}
.sa-icon.sa-success.animate::after{
  -webkit-animation: rotatePlaceholder 4.25s ease-in;
  animation: rotatePlaceholder 4.25s ease-in;
}
@-webkit-keyframes animateErrorIcon{
  0%{
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0;
  }
  100%{
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
}
@keyframes animateErrorIcon{
  0%{
    transform: rotateX(100deg);
    -webkit-transform: rotateX(100deg);
    opacity: 0;
  }
  100%{
    transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
}
.animateErrorIcon{
  -webkit-animation: animateErrorIcon .5s;
  animation: animateErrorIcon .5s;
}
@-webkit-keyframes animateXMark{
  0%, 50%{
    transform: scale(.4);
    -webkit-transform: scale(.4);
    margin-top: 26px;
    opacity: 0;
  }
  80%{
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px;
  }
  100%{
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
@keyframes animateXMark{
  0%, 50%{
    transform: scale(.4);
    -webkit-transform: scale(.4);
    margin-top: 26px;
    opacity: 0;
  }
  80%{
    transform: scale(1.15);
    -webkit-transform: scale(1.15);
    margin-top: -6px;
  }
  100%{
    transform: scale(1);
    -webkit-transform: scale(1);
    margin-top: 0;
    opacity: 1;
  }
}
.animateXMark{
  -webkit-animation: animateXMark .5s;
  animation: animateXMark .5s;
}
@-webkit-keyframes pulseWarning{
  0%{
    border-color: #F8D486;
  }
  100%{
    border-color: #F8BB86;
  }
}
@keyframes pulseWarning{
  0%{
    border-color: #F8D486;
  }
  100%{
    border-color: #F8BB86;
  }
}
.pulseWarning{
  -webkit-animation: pulseWarning .75s infinite alternate;
  animation: pulseWarning .75s infinite alternate;
}
@-webkit-keyframes pulseWarningIns{
  0%{
    background-color: #F8D486;
  }
  100%{
    background-color: #F8BB86;
  }
}
@keyframes pulseWarningIns{
  0%{
    background-color: #F8D486;
  }
  100%{
    background-color: #F8BB86;
  }
}
.pulseWarningIns{
  -webkit-animation: pulseWarningIns .75s infinite alternate;
  animation: pulseWarningIns .75s infinite alternate;
}
#modalContainer > #alertBox {
    position:fixed;
}
</style>

Rennur

Very nice!

mrbdrm

working great here Thanks 😃