アラートをカスタマイズする。

jquery.alerts.jsをつかってアラートをカスタマイズします。

本家サイト＞＞＞jQuery Alert Dialogs よりjsとCSSと画像をダウンロード
jquery.alerts.jsとjquery.alerts.cssと画像フォルダを使用します。
※コーディングマニアデモページでは、画像は使っていません。またCSSとjsを若干変更。
js変更箇所は下記２箇所
overlayOpacity: 0.6,　 // transparency level of overlay
overlayColor: '#000', // base color of overlay

デモページへ

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.alerts.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#confirm_button").click( function() {
jConfirm('コーディングマニアトップページへ戻りますか？', '確認',function(r) {
if(r == true){
location.href="https://codingmania.net/";
　　　　}else{
location.href="";
　　　　}
});
});
});
</script>
<link rel="stylesheet" href="jquery.alerts.css" type="text/css" media="all" />

HTMl

<p><input id="confirm_button" type="button" value="クリックする" /></p>