alert()が効かない環境があるようなのでモーダルで代用する

TIPS 0 Takuya Kobayashi

Safariなどの一部のブラウザでalert();が効かない場合があるようなので、代わりにモーダルウインドウを表示させて代用することにしました。

ソースはコピペで自由に使ってください。レスポンシブです。

<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<p><a onClick="alertModal('Hello World');" style="color:red;">ここをクリック</a>するとアラートを表示</p>
<div id="alertmodal"></div>
<script>
function alertModal(modalText) {
$('#alertmodal').html('<div>'+modalText+'</div>').fadeIn();
}
$('#alertmodal').on('click',function(){
$(this).fadeOut();
});
</script>
<style>
#alertmodal {
display: none;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
}
#alertmodal div {
position: absolute;
top: 50%;
left: 3%;
right: 3%;
max-width: 800px;
width: auto;
color: red;
padding: 1em;
background: #fff;
border-radius: 6px;
transform: translateY(-50%);
margin: 0 auto;
box-shadow: 0 0 3px #000;
}
</style>
</body>
</html>

--
以上