画像のサムネイルがあってクリックしたら大きくなるとか
×ボタンじゃなくても枠外を押したらもどるとか
alertのクリック版みたいなものが
モーダルウィンドウ
ハンバーガーメニューもモーダルの亜種といえる
プラグインでたくさんある
ライトボックス系
画像に特化したやつ
先生がよく使うの
ライトギャラリー
プラグインで安定しているのを使いましょう
いらんエラーが出ない
コピペはしたらよい
ただせっかく勉強できる場所にいるので理解しないでペッと貼るのはもったいない
というおはなし
全然コピペOK
画像に直リンクするとブラウザに画像が出る
ライトボックスはそれを同じ画面でやる感じ
display:none
と
visibility:hidden
ただただ隠したいときはhidden
なくしたいときはdisplay:none
display:none と visibility:hidden の違い
>visibility:hiddenは名前の通り、要素はあるけど見えない状態。
display:noneは、要素も取得されず、完全にその場にない扱い。
--->modal.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モーダルウィンドウ</title>
<link rel="stylesheet" href="modal.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1 class="modal">モーダルウィンドウをだす</h1>
<!--開く用のhtmlの情報-->
<div class="modal_on">
<p>モーダルウィンドウだよ</p>
<p>モーダルウィンドウだよ2行目</p>
<p>モーダルウィンドウだよ３行目</p>
<img src="fish.png">
</div>
<script>
$(function(){
$('.modal').on('click',function(){
$('.modal_on').css({'display':'block'});
});
$('.modal_on').on('click',function(){
$(this).css({'display':'none'});
});
});
</script>
</body>
</html>
--->modal.css
@charset "utf8";
body{
background-color:#cff;
}
h1{
cursor: pointer;
}
.modal_on{
display:none;
background-color:#fff;
border:1px solid #555;
width:80%;
margin: 0 auto;
}
一か所間違ってた
まさかのcssで行おわりが:に。
疲労してるな。
modal.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モーダルウィンドウ</title>
<link rel="stylesheet" href="modal.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1 class="modal">モーダルウィンドウをだす</h1>
<!--開く用のhtmlの情報-->
<div class="modal_on">
<p>モーダルウィンドウだよ</p>
</div>
<script>
$(function(){
$('.modal').on('click',function(){
$('.modal_on').css({'display':'block'});
});
$('.modal_on').on('click',function(){
$(this).css({'display':'none'});
});
});
</script>
</body>
</html>
--->modal.css
@charset "utf8";
body{
background-color:#ffc;
}
h1{
cursor: pointer;
}
.modal_on{
display:none;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,0.8);
position:fixed;
top:0;
left:0;
}
.modal_on p{
width:50%;
height:50%;
background-color:#fff;
margin: 0 auto;
transform:translateY(50%);
}
