yasuko
結婚したい芸能人ランキング2位はヒロミです
クリックしたら背景が暗くなって画像などがぽよよんと出てくる、あれ。
なんてワードで検索すれば見つけ出せるかわからないままさまようことありますね。
「モーダルウィンドウ」と呼びます。
サクッとつかってみよう
こちらのプラグインを使います。
ダウンロードしたzipのなかにある「dist」内のcssとjsを使います。
<link rel="stylesheet" href="css/magnific-popup.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script>
$( document ).ready( function () {
$( '.modal' ).magnificPopup( {
type: 'image'
} );
} );
</script>
<div>
<a href="#" class="modal">クリックすると画像がぽよよんと出てくるよ</a>
</div>
type: ‘image’ には画像以外も指定できます。
Googlemapのiframeとか
Youtubeのiframeとか
モーダルで開きたいものはいろいろあるもんです。
jQueryライブラリの読み込みもお忘れなく！