window.alert = function () {
var msg = arguments[0];
jQuery('<div class="modal"></div>')
.html(msg.replace(/\n/g, "<br />"))
.appendTo('body')
.modal({
escapeClose: true,
clickClose: false,
showClose: true
});
};
<a href="#go-somewhere" onclick="alert('Alert Message! \n New Line - Alert Message. \n Oh, dude. Boring it is.'); return false;">Link</a>
.modal {
display: none;
width: 200px;
background: #fff;
padding: 15px 30px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
-o-box-shadow: 0 0 10px #000;
-ms-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
}
.modal a.close-modal {
position: absolute;
top: -12.5px;
right: -12.5px;
display: block;
width: 30px;
height: 30px;
text-indent: -9999px;
background: url(https://raw.github.com/kylefox/jquery-modal/master/close.png) no-repeat 0 0;
}
.modal-spinner {
display: none;
width: 64px;
height: 64px;
position: fixed;
top: 50%;
left: 50%;
margin-right: -32px;
margin-top: -32px;
background: url(spinner.gif) #111 no-repeat center center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
}
External resources loaded into this fiddle: