ITDS: 【javascript】ポップアップ表示（Alert）について

こんにちは

ちょっと最近SCPでcss+jsをやるようになったので少し解説と備忘録

<script type="text/javascript">
window.onload = function(){
    alert("xxxxx");
}
</script>

window.onloadは、ページが読み込まれた際に動きます。
alertで、ポップアップ表示されます。

ボタンを押したら動くようにしたい場合は、onclickを使います。

<script type="text/javascript">
function test(){
    alert("xxxxx");
}
</script>

<input type="button" value="ボタン" onclick="test();">

このポップアップは、ブラウザに依存します。
「SweetAlert」を使用すればスタイリッシュにデザインできます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script type="text/javascript">
$(function(){
     swal({
    title: "タイトル",
    text: "内容",
        confirmButtonText: 'OK',
        confirmButtonColor: '#DD6B55'
    });
});
</script>

SweetAlertはJQueryをつかっているので、window.onloadは、$で省略しています。

色々オプションつけてカスタマイズできるので
詳しくは公式サイトをチェックしてみてください。

HTML、CSS、javascriptのお勉強